Redux实现简易TodoList的增加、删除(全)
Tip:文件建立及ui代码可见本系列上一篇博客:React安装Ant-Design并初步使用绘制UI界面
完整代码会在最后贴出哦~~<( ̄︶ ̄)↗[GO!]
一、给input添加事件
import React, {
Component } from "react";
import 'antd/dist/antd.css'
import {
Input, Button, List } from 'antd'
import store from './store/index'
class TodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
this.changeInputVal= this.changeInputVal.bind(this); //转变this指向
}
changeInputVal=(e)=>{
//给input增加事件
console.log(e.target.value);
}
render() {
return (
<div className="div1">
<div>
Name <Input placeholder={
this.state.inputValue}
style={
{
width: '250px', marginRight: '10px' }}
onChange={
this.changeInputVal}
value={
this.state.val}
/>
<Button type="primary">增加</Button>
</div>
<div style={
{
margin: '10px', width: '300px' }}>
<List
bordered
dataSource={
this.state.list}
renderItem={
item => (<List.Item>{
item}</List.Item>)}
/>
</div>
</div>
)
}
}
export default TodoList;
二、创建Action
想改变Redux里边State的值就要创建Action了。Action就是一个对象,这个对象一般有两个属性,第一个是对Action的描述,第二个是要改变的值。
changeInputVal =