第二十五章 案例TodoList 之删除数据

本小节，我们来实现列表的删除按钮的功能，点击删除按钮，弹出一个弹出是否删除的弹窗，点击确定删除，点击取消就不删除。

因为我们之前已经写过祖孙组件的通信了我们直接写代码：

• 1、在App组件里面定义一个删除数据的函数

export default class App extends Component {
  // 定义列表的初始状态数据
  state = {todos: [
    {id:'001',name:'吃饭',done: true},
    {id:'002',name:'睡觉',done: true},
    {id:'003',name:'写代码',done: false},
  ]}

  // 获取Header组件收集的任务项数据
  addTodo = (todoObj) => {
    const { todos } = this.state
    const newTodo = [todoObj, ...todos]
    this.setState({todos:newTodo})
  }

  // 更新状态数据
  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})
  }

  // 删除状态数据
  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter((todo)=>{
      return todo.id !== id
    })
    this.setState({todos: newTodos})
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
      <div className="todo-wrap">
        <Header addTodo={this.addTodo}/>
        <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
        <Footer/>
      </div>
    </div>
    )
  }
}

这里我们是通过id来过滤数组的，把我们要删除的任务项给过滤掉。

• 2、在List组件里面接收该属性，并做好props限制

export default class List extends Component {
  // 对props做类型和必要性的限制
  static propTypes = {
    updateTodo: PropTypes.func.isRequired,
    todos: PropTypes.array.isRequired,
    deleteTodo: PropTypes.func.isRequired
  }

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

• 3、在Item组件里面给删除按钮添加点击事件

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)
  }

  // 删除任务项
  deleteHandle = (id) => {
    if(window.confirm('确定删除该任务吗？')) {
      this.props.deleteTodo(id)
    }
  }

  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 onClick={()=>this.deleteHandle(id)} className="btn btn-danger" style={{display:mouseIn?"block":"none"}}>删除</button>
      </li>
    )
  }
}

• 最后看看效果

---

至此我们就实现对Todolist的删除功能。