React入门实践之TodoList: 添加事件和搜索框

在上篇文章中，我们使用React实现了一个TodoList，可以显示基本的待办事项的列表，今天我们继续添加一些功能，比如选中一个TodoItem的checkbox进而可以改变它的完成状态，添加一个搜索框，在搜索框中输入关键字可以对多条数据进行过滤。
我们还是在原来的基础上做改动，下面是最新的TodoList模块：

var TodoList = React.createClass({
  getInitialState: function() {
   
    return {
      data: []
    };
  },
  componentDidMount: function() {
   
    var mockData = [
      {id: 1, name: "report the updates to Boss", time: "9:30"},
      {id: 2, name: "Stand-up meeting", time: "10:00"},
      {id: 3, name: "Draw up a plan for next step", time: "11:00"}
    ];

    this.setState({
      data: mockData
    });
  },
  render: function() {
   
    var todoItems = this.state.data.map(function(todo) {
   
      return (
        //passing the whole todo object as a property
        <TodoItem key={todo.id} todo={todo}/>
      );
    });

    return (
      <div className="todoList">{todoItems}</div>
    );
  }
});

在上面的代码中，我们改进了TodoItem属性的传递方式，直接把一个todo数据对象作为属性提供给TodoItem，这样更利于开发过程中的数据处理。接下来，我们也要对TodoItem模块进行改进，代码如下：

var TodoItem = React.createClass({
  //will be called after clicking the checkbox
  handleClick: function(event) {
   
    var todoData = this.props.todo;

    todoData.hasDone = !todoData.hasDone;

    //re-render the view
    this.setState({
      hasDone: todoData.hasDone
    });