onInputSubmit = (event) => {
event.preventDefault();
this.setState((previousState)=>({
list: [...previousState.list, {item: previousState.newToDo, done: false }], // notice the change here
newToDo: ''
}));
};
属性done添加完成后就需要新增一个方法当点击事项时候来改变这个值：
onListItemClick = (i) => { // takes the index of the element to be updated
this.setState((previousState)=>({
list: [
...previousState.list.slice(0, i), // slice returns a new array without modifying the existing array. Takes everything up to, but not including, the index passed in.
Object.assign({}, previousState.list[i], {done: !previousState.list[i].done}), // Object.assign is a new ES6 feature that creates a new object based on the first param (in this case an empty object). Other objects can be passed in and will be added to the first object without being modified.
...previousState.list.slice(i+1) // takes everything after the index passed in and adds it to the array.
]
}))
};
然后把这个方法通过props传递给List 组件，这里就没有使用解构参数传递，用来和Input的做对比。因为这个函数需要一个参数就是当前列表的序列号，但是肯定不能直接call这个函数否则会报错，因此使用bind方法，出入i参数：
onClick={props.onClick.bind(null, i)}
当然还有另一种方法：
onClick={() => props.onClick(i)}
然后在事项内容的span标签上添加 onClick 方法，改变当前事项的done值后，在通过判断此布尔值来进行样式的修改添加或者划掉删除线。
<span
style={
el.done
? {textDecoration: 'line-through', fontSize: '20px'}
: {textDecoration: 'none', fontSize: '20px'}
}
onClick={props.onClick.bind(null, i)}
>
8. 删除事项
最后我们在添加删除事项的功能，这个和划掉事项非常相似，我们只需要新增一个删除按钮，然后再新增一个方法修改列表，具体代码如下：
<button className="btn btn-danger pull-right" > x </button>
deleteListItem = (i) => {
this.setState((previousState)=>({ // using previous state again
list: [
...previousState.list.slice(0, i), // again with the slice method
...previousState.list.slice(i+1) // the only diffence here is we're leaving out the clicked element
]
}))
};
把deleteListItem 方法传递到列表组件中然后在删除按钮上绑定即可，仿照上一个自己写一下就好。
现在我们有一个完整功能的APP了，是不是感觉很cool，这个就是不用redux时候的形态了，但是你会发现当状态越来越复杂时候很繁琐，因此我们下面就要介绍redux来管理状态了。