从零开始搭建一个react项目开发(6)

var props = {
 name: 'hector',
 age: 21
}


function log(props){
 console.log(props.name);
 console.log(props.age);
}

log(props);

is the same as this:

let props = {
 name: 'hector',
 age: 21
}

log = ({name, age}) => {
 console.log(name);
 console.log(age);
}

log(props);

5. setState

上面的newToDo仅仅是添加了一个state用来存储输入框的值，给定一个值，输入框就会显示，明显还不是我们要的效果，我们需要做的是基于输入框的值的改变来动态改变这个state。

为了实现这个功能，我们需要再添加一个onChange方法同样利用props传进Input组件： onChange={onChange}, 然后解构参数就是({ onChange, value })。

然后在 ToDoApp.js的componentWillMount 添加一个新的方法 onInputChange。这个方法有一个参数event, 它将要捕获用户在输入框输入的值。

onInputChange = (event) => {
 this.setState({ newToDo: event.target.value}); // updates state to new value when user changes the input value
};

6. 添加新列表事项

现在需要向列表中添加新的事项，也就是在提交后能把输入框的值存储并显示到列表中。我们需要再新建一个onInputSubmit的方法，参数同样是event，函数体内首先需要写 event.preventDefault(),然后用 setState 方法把新事项添加到列表数组中，但是，一定要注意我们的state应该是immutable的，这是react中必须遵循的一个准则，这样才能保证对比性与可靠性。

为了实现这个功能, 需要用到this.setState 回调函数，参数为previousState：

this.setState((previousState)=>({
 list: previousState.list.push(previousState.newToDo)
}))

正如我上面的描述，最开始写state的时候很多人都会犯这样的错误，直接用push这样的方法，修改了state，这样就不算immutable的，我们一定要保证绝不直接修改原state。

这里又可以用到ES6中的新特性了，扩展操作符，它通过遍历旧数组返回一个新数组，使旧的数组保持原样，这样我们就把事项添加到列表数组末尾：

this.setState((previousState)=>({
 list: [...previousState.list, previousState.newToDo ], // the spread opperator is called by using the ... preceding the array
}));

在提交添加新事项的同时，需要将newToDo重置为''：

this.setState((previousState)=>({
 list: [...previousState.list, previousState.newToDo ],
 newToDo: ''
}));

7. 划掉事项

是时候添加划掉事项的功能了。为了实现这个功能需要添加一个新的属性用来标注是否需要划掉，因此需要改变原来的数组为一个对象数组，每一个事项都是一个对象，一个key为item表示原来的事项内容，一个key为done用布尔值来表示是否划掉。 然后先把原来的onInputSubmit方法修改，同样要注意immutable，使用扩展操作符如下：