Todos案例（二）03-切换任务状态——点击每个条目的时候，需要把数据中的状态属性进行取反

切换任务状态——点击每个条目的时候，需要把数据中的状态属性进行取反

• 控制单个条目的选中控制

结构

 //默认没选中   checked={true}
<input checked={item.done} onChange={this.handleCheck.bind(this, item.id)} type="checkbox"/>

方法

handleCheck = (id) => {
    // console.log(id)
  // 点击每个条目的时候，需要把数据中的done属性进行取反
  let todos = [...this.state.todos]
  todos.some(item => {
    if (item.id === id) {
      // 找到后把对应done状态取反
      item.done = !item.done
      // 终止继续遍历
      return true
    }
    return false
  })
  this.setState({
    todos: todos
  })
}

• 控制顶部权限按钮状态

结构

<input defaultChecked={isAll} id="toggle-all" className="toggle-all" type="checkbox"/>
     <label onClick={this.handleCheckAll} htmlFor="toggle-all">全部标记为完成</label>

方法

handleCheckAll = () => {
  this.setState({
    isAll: !this.state.isAll
  }, () => {
    // 控制所有的列表的选中状态
    let todos = [...this.state.todos]
    todos.forEach(item => {
      item.done = this.state.isAll
    })
    this.setState({
      todos: todos
    })
  })
}

全部勾选-初始效果

全选效果

未全选效果