Redux实现简易TodoList的增加、删除(全)

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 = (e)