第二十三章 案例TodoList之数据更新

本小节，我们要实现点击复选框，修改任务项的实时状态，但是Item组件和App组件是祖孙关系，不是父子关系，我们还能使用props进行通信吗？答案是可以的。

在App组件定义一个更新的函数并传递给Item组件

• 1、定义一个更新状态数据的函数

 // 更新状态数据
  updateTodo = () => {
    const { todos } = this.state
    console.log(todos)
  }

• 2、先传递给List组件

 render() {
    const {todos,updateTodo} = this.props
    return (
      <ul className="todo-main">
        {
          todos.map(todo=>{
            return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
          })
        }
      </ul>
    )
  }

• 3、在Item组件定义一个onChange事件的回调

import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {

  // 初始化状态数据
  state = {mouseIn:false}

  // 鼠标移入移出回调函数 
  mouseHandle = (flag) => {
    this.setState({mouseIn:flag})
  }

  // 更新任务项状态
  checkHandle = (id,event) => {
    this.props.updateTodo(id,event.target.checked)
  }

  render() {
    const {id,name,done} = this.props
    const {mouseIn} = this.state
    return (
      <li onMouseEnter={()=>this.mouseHandle(true)} onMouseLeave={()=>this.mouseHandle(false)}  style={{backgroundColor: mouseIn?'gainsboro':''}}>
            <label>
              <input type="checkbox" defaultChecked={done} onChange={event=>this.checkHandle(id,event)}/>
              <span>{name}</span>
            </label>
            <button className="btn btn-danger" style={{display:mouseIn?"block":"none"}}>删除</button>
      </li>
    )
  }
}

我们给复选框绑定了一个onChange的回调函数checkHandle(id,event)并把id和event作为参数。当我们点击复选框的时候，我们将参数传递给updateTodo函数，让其修改App组件的状态数据。

• 4、改造updateTodo函数

 // 更新状态数据
  updateTodo = (id,done) => {
    const { todos } = this.state
    const newTodos = todos.map(todoObj=>{
      if (id === todoObj.id) return {...todoObj,done}
      return todoObj
    })
    this.setState({todos:newTodos})
  }

这里我们判断如果id值与列表里面的id值匹配，我们就更新done值的状态，否则不做改变，原样返回。

• 5、具体效果

我们可以从图中看到，当我们点击列表的复选框，修改了任务项的状态时，react开发者工具里面的state值也会实时变化，至此，说明我们已经完成数据的实时更新。

---

小总结

• 获取复选框的状态值使用：event.target.checked
• 祖孙组件之间的通信也可以使用props进行传递。