import * as React from "react";
import { Component } from "react";
import styles from "./studys.module.css";
import { Input ,Button} from 'antd';
import { useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";
export const Studys: React.FC = () => {
  const dispatch = useDispatch();
  const cityList =useSelector((state)=>state.city.cityLists)
  const cityName =useSelector((state)=>state.city.cityName)
  const cityInput =useSelector((state)=>state.city.cityInput)
  const addCity =()=>{
    console.log(cityInput)
  }
  const changeInput=(e)=>{
    // console.log(e.target.value)
    const action = {
      type: 'changeInput',
      value: e.target.value,
    };
    dispatch(action)
  }
  return (
    <>
      {/* 做一个与header.tsx类似的页面 */}
      <h1>练习页面</h1>
      <div>
        <div>添加你想去的城市：
        <input placeholder="Basic usage"onChange={changeInput} style={{width:200}} value={cityInput}  />
        <Button type="primary" onClick={addCity}  >
          添加
        </Button>
        </div>
        <h1>我最喜欢的城市：{cityName}</h1>
        <h1>我想去的城市:{cityList.map((item,index)=>{
          return(
            <>
            <span>{item.name}</span>
            </>
          )
        })}</h1>
      </div>
    </>
  );
};