TotoListUI.js

import React from "react";
import "antd/dist/antd.css";
import { Input, Button, List } from "antd";
const TotoListUI = (props) =>{
    return (
              <div style={{ margin: "10px" }}>
                <div>
                  <Input
                    value={props.inputValue}
                    placeholder={props.inputValue}
                    style={{ width: "250px", marginRight: "10px" }}
                    onChange={(e) => props.changeInputValue(e)}
                  />
                  <Button type="primary" onClick={() => props.addValue()}>
                    增加
                  </Button>
                </div>
                <div style={{ margin: "10px", width: "300px" }}>
                  <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (
                      <List.Item>
                        {item}
                        <Button
                          type="danger"
                          onClick={() => props.deleteItem(index)}
                        >
                          删除
                        </Button>
                      </List.Item>
                    )}
                  />
                </div>
              </div>
            );
}
// import { CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from "./store/actionsTypes";
// class TotoListUI extends Component {
//   // constructor(props) {
//   //     super(props);
//   //     this.state = {  }
//   // }
//   //把ui部分写成无状态组件
//   render() {
//     return (
//       <div style={{ margin: "10px" }}>
//         <div>
//           <Input
//             value={this.props.inputValue}
//             placeholder={this.props.inputValue}
//             style={{ width: "250px", marginRight: "10px" }}
//             onChange={(e) => this.props.changeInputValue(e)}
//           />
//           <Button type="primary" onClick={() => this.props.addValue()}>
//             增加
//           </Button>
//         </div>
//         <div style={{ margin: "10px", width: "300px" }}>
//           <List
//             bordered
//             dataSource={this.props.list}
//             renderItem={(item, index) => (
//               <List.Item>
//                 {item}
//                 <Button
//                   type="danger"
//                   onClick={() => this.props.deleteItem(index)}
//                 >
//                   删除
//                 </Button>
//               </List.Item>
//             )}
//           />
//         </div>
//       </div>
//     );
//   }
// }

export default TotoListUI;