todoList案例（react版本）之删除todo

richest_qi

已于 2022-05-09 16:41:14 修改

阅读量385

点赞数

分类专栏： React17/18 文章标签： todoList案例 react 删除todo

于 2022-05-09 16:10:53 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/124668422

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

本文档展示了如何在React应用中实现删除Todo的功能。主要涉及App.js、List/index.jsx和Item/index.jsx三个组件的代码变更，通过点击按钮触发删除操作，并使用filter方法更新状态。此外，还提到了鼠标移入效果的CSS实现。

摘要由CSDN通过智能技术生成

鼠标移入效果采用css实现。

删除todo，代码变更涉及的文件有：

App.js，即App组件
List/index.jsx，即List组件
Item/index.jsx，即Item组件

在这里插入图片描述

App.js（App组件）

import React, { Component } from 'react';
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  state = {
    todos:[
      {id:"001",title:"吃饭",done:true},
      {id:"002",title:"睡觉",done:true},
      {id:"003",title:"打豆豆",done:false}
    ]
  }

  addTodo = (todoObj) => {
    const {todos} = this.state;
    const newTodos = [todoObj,...todos];
    this.setState({
      todos:newTodos
    })
  }

  checkTodo = (id,done) => {
    const {todos} = this.state;
    const newTodos = todos.map(todoObj => {
      if(todoObj.id === id) return {...todoObj,done:done}
      else return todoObj;
    })
    this.setState({
      todos:newTodos
    })
  }

  deleteTodo = (id) => {
    const {todos} = this.state;
    const newTodos = todos.filter(todo => todo.id !== id);
    this.setState({
      todos:newTodos
    })
  }

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

List/index.jsx（List组件）

import React, { Component } from 'react';
import Item from "../Item";
import "./index.css";

export default class List extends Component {
  render() {
    const {todos,checkTodo,deleteTodo} = this.props;
    return (
      <ul className="todo-main">
      {
        todos.map(todo => <Item key={todo.id} {...todo} checkTodo={checkTodo} deleteTodo={deleteTodo}/>)
      }
      </ul>
    )
  }
}

Item/index.jsx（Item组件）

import React, { Component } from 'react'
import "./index.css";

export default class Item extends Component {

  handleChange = (id) => {
    return (event) => {
      this.props.checkTodo(id,event.target.checked);
    }
  }

  handleClick = (id) => {
    return () => {
      if(window.confirm("确定删除吗?")){
        this.props.deleteTodo(id);
      }
    }
  }

  render() {
    const {id,title,done} = this.props;
    const {handleChange,handleClick} = this;
    return (
      <li>
        <label>
          <input type="checkbox" defaultChecked={done} onChange={handleChange(id)}/>
          <span>{title}</span>
        </label>
        <button className="btn btn-danger" onClick={handleClick(id)}>删除</button> 
      </li>
    )
  }
}