搭配react实现添加、完成、筛选

这一小节我们将实现添加任务，完成任务，筛选任务逻辑

1、添加任务

添加任务我们要用到的是触发addtodo的action，我们可以规定用户输入在文本框文本并点击按钮就触发了action，我们便可以使用store.dispatch(addTodo(Text));来添加任务。

我们为添加任务按钮绑定点击事件，获取文本框内容-->添加任务-->清空文本框

handleClick:function(e){
  var addInput = ReactDOM.findDOMNode(this.refs.todo);
  var addText = addInput.value.trim();
  if(addText){
    store.dispatch(addTodo(addText));
    addInput.value = '';
  }
  else{
    alert('请输入内容');
  }
},

2、完成任务

完成任务，我们只需要为任务列表中的未完成任务绑定点击事件，点击任务则触发完成任务action，使用store.dispatch(completeTodo(e.target.dataset.index))来实现完成任务，更新state

我们可以通过e.target.dataset.index获取到任务对应的index

handleComplete:function(e){
  store_.dispatch(completeTodo(e.target.dataset.index))
  e.target.classList.add('complete');
},

3、筛选任务

筛选任务，我们只需要为筛选任务按钮绑定点击事件，通过store.dispatch(selectFilter( e.target.dataset.select))来实现更新state的filter，这里我们需要对虚拟dom进行操作，我们需要通过筛选filter的参数来选择要显示的内容

根据state中filter参数并通过数组的filter函数进行筛选

handleSelect:function(e){
  store_.dispatch(selectFilter( e.target.dataset.select))
},

4、重新构造虚拟DOM

我们需要为未完成的任务绑定点击事件onClick={this.handleComplete}，为筛选任务按钮绑定onClick={this.handleSelect},为添加任务按钮绑定onClick={this.handleClick}

render:function(){
  return(
        <div className='warp'>
        <input type='text' ref='todo'/>
        <button onClick={this.handleClick}>'☠'</button>
        <ul>
          {
            this.state.items.todos.filter(function(item){
              switch(this.state.items.filter){
                case 'SHOW_ALL':
                  return true;
                case 'SHOW_COMPLETE':
                  return item.completed;
                case 'SHOW_ACTIVE':
                  return !item.completed;
              }
            }.bind(this)).map(function(item){
              var index = this.state.items.todos.indexOf(item);
               return item.completed ? <li className='complete' data-index={index}>{item.text}</li> : <li data-index={index} onClick={this.handleComplete}>{item.text}</li>
            }.bind(this))
          }
        </ul>
        <button onClick={this.handleSelect}  data-select='SHOW_ALL'>ALL</button>
        <button onClick={this.handleSelect} data-select='SHOW_COMPLETE'>COMPLETE</button>
        <button onClick={this.handleSelect} data-select='SHOW_ACTIVE'>ACTIVE</button>
      </div>
    );
  }
});