第二十五章 案例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的删除功能。