搭配react实现任务显示

我们将搭配react实现任务界面的显示。

1、实现思路

我们将用react创建一个AddTodoCom组件。

初始化实例state，将store_.getState()也就是redux的state赋值给items

getInitialState:function(){
  return {
    items:store.getState()
  }
}

完成组件的render后调用subscribe函数，每次redux的state发生改变同步更新react的state

componentDidMount:function(){
  var unsubscribe = store_.subscribe(this.onChange);
},
onChange:function(){
  this.setState({
    items:store.getState()
  });
},

创建虚拟DOM

我们需要创建输入框、添加按钮、筛选按钮、以及任务列表，

我们为已经完成任务和为完成的任务添加不同的样式，并且标记每个任务的index，以便于完成任务操作

使用bind改变this的指向

render:function(){
  return(
        <div className='warp'>
        <input type='text' ref='todo'/>
        <button onClick={this.handleClick}>'☠'</button>
        <ul>
          {
            this.state.items.todos.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} >{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>
    );
}

到这里我们就完成了任务界面的显示。

在此提醒一下，如果暂时不会react可以在汇智网找到相应的课程学习，当然，也可以绕过react相关章节，对redux章节并无影响。为了方便暂时不会react同学学习，在react相关章节中也不会留相关练习，见谅。