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

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

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

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