todolist简单草图react版

无组件分布，无组件分布，无组件分布，全是css全是js的dom节点。是简单的草图

首先定义两个变量tasks 与 task ，分别装li里的数据与Input里面的数据。

 state = {
                tasks: [],
                task: ""
            }

在input中设置状态改变事件，当改变时把输入框中的内容同步给此时的task

添加任务时，点击按钮，并且加入index与date。

 //添加任务
            handleAddTask = () => {
                const { task, tasks } = this.state
                if (!task) return
                //添加数据 同步到state
                tasks.unshift({ task: task, date: new Date().toLocaleDateString() })
                //视图同步
                this.setState({
                    task: "", //清空输入框
                    tasks
                })
            }

  <h1>Today Tasks:{tasks.length}</h1>
                        <div>
                            <input type="text" value={this.state.task} onChange={this.handleChange} />
                            <button onClick={this.handleAddTask} >add task</button>
                        </div>

 点击删除按钮，触发方法：

 //删除任务
            handleDeleteTask = (index) => {
                const { tasks } = this.state
                tasks.splice(index, 1)
                this.setState({
                    tasks: tasks
                })
            }

视图的样子如下：be like

  //视图 
            render() {
                const { tasks } = this.state
                return (
                    <div>
                        <h1>Today Tasks:{tasks.length}</h1>
                        <div>
                            <input type="text" value={this.state.task} onChange={this.handleChange} />
                            <button onClick={this.handleAddTask} >add task</button>
                        </div>
                        <div>
                            <ul>
                                {
                                   tasks.map((item, index) => {
                                        <li key={index}> <span> {index + 1}---{item.task}----{item.date}</span>
                                            <button onClick={this.handleDeleteTask.bind(this,index)}>dele</button></li>
                                    })  
                                }
                            </ul>
                        </div>
                    </div>
                )
            }

        }