组件拆分详细代码（二）03——List列表组件-添加任务功能 & 删除和单选功能 & 全选按钮功能 & 编辑任务功能

组件化拆分——添加任务功能 & 删除和单选功能 & 全选按钮功能 & 编辑任务功能

src/views/List.js

import React from 'react'

class List extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      isAll: false
    }
  }

  handleDelete = (id) => {
    // 控制删除操作
    this.props.deleteTask(id)
  }

  handleCheck = (id) => {
    // 控制单选
    this.props.toggleItem(id)
  }

  toggleAll = () => {
    // 顶部全选按钮
    this.setState({
      isAll: !this.state.isAll
    }, () => {
      // 控制所有的列表的选中状态
      this.props.toggleAll(this.state.isAll)
    })
  }

  handleDoubleClick = (id, e) => {
    // 双击之后进入编辑状态
    // 获取label元素的父元素的下一个兄弟元素 input
    let input = e.target.parentNode.nextSibling
    // 调用父组件函数修改任务编辑状态
    this.props.showEditInput(id)
    setTimeout(() => {
      // 页面已经显示input元素之后才控制获取焦点
      input&&input.focus()
    }, 0)
  }

  handleEditEtile = (id, e) => {
    // 控制数组中对应标题的变化
    this.props.editTask(id, e.target.value)
  }

  render () {
    let { todos } = this.props
    let { isAll } = this.state
    let todoTags = todos.map(item => (
      <li key={item.id} className={[item.done?'completed':'', item.isEdit? 'editing': ''].join(' ')}>
        <div className="view" onDoubleClick={this.handleDoubleClick.bind(this, item.id)}>
          <input checked={item.done} onChange={this.handleCheck.bind(this, item.id)}  className="toggle" type="checkbox"/>
          <label>{item.etitle}</label>
          <button className="destroy" onClick={this.handleDelete.bind(this, item.id)}></button>
        </div>
        <input value={item.etitle} onChange={this.handleEditEtile.bind(this, item.id)} onBlur={this.handleDoubleClick.bind(this,item.id)}  className="edit" />
      </li>
    ))
    return (
      <section className="main">
        <input defaultChecked={isAll}  id="toggle-all" className="toggle-all" type="checkbox"/>
        <label onClick={this.toggleAll} htmlFor="toggle-all">全部标记为完成</label>
        <ul className="todo-list">
          {todoTags}
        </ul>
      </section>
    )
  }
}

export default List

数据显示

增加数据