如何在 React 中使用过滤器方法制作 Todo 应用程序时删除 Todo 任务？

Question

我目前正在学习 React.js，对 React.js 并不熟悉。 我正在制作一个简单的待办事项应用程序，只是为了研究“CRUD”操作，并且我努力在单击按钮时删除任务。 听说是通过filter方法完成的。 正如我所说，我不熟悉 React.js，所以我无法使用过滤器方法删除任务。

这是我的代码

JSX

import "./style.css";
import { useState } from "react";

function App() {
  const [toDos, setToDos] = useState([]);
  const [toDo, setToDo] = useState("");

  return (
    <div className="app">
      <div className="mainHeading">
        <h1>ToDo List</h1>
      </div>
      <div className="subHeading">
        <br />
        <h2>Whoop, it's Wednesday 😀 ☕ </h2>
      </div>
      <div className="input">
        <input
          value={toDo}
          onChange={(e) => setToDo(e.target.value)}
          type="text"
          placeholder="🖊️ Add item..."
        />
        <i
          onClick={() =>
            setToDos([...toDos, { id: Date.now(), text: toDo, status: false }])
          }
          className="fas fa-plus"
        ></i>
      </div>
      <div className="todos">
        {toDos.map((obj) => {
          return (
            <div className="todo">
              <div className="left">
                <input
                  onChange={(e) => {
                    console.log(e.target.checked);
                    console.log(obj);
                    setToDos(
                      toDos.filter((obj2) => {
                        if (obj2.id === obj.id) {
                          obj2.status = e.target.checked;
                        }
                        return obj2;
                      })
                    );
                  }}
                  value={obj.status}
                  type="checkbox"
                  name=""
                  id=""
                />
                <p>{obj.text}</p>
              </div>
              <div className="right">
                <i onClick={this.props.deleteTodo} className="fas fa-trash"></i>
              </div>
            </div>
          );
        })}

        {toDos.map((obj) => {
          if (obj.status) {
            return <h1 className="finished">{obj.text}</h1>;
          }
          return null;
        })}
      </div>
    </div>
  );
}

export default App;

请告诉我一个解决方案

Answer 1

在您的 onClick 处理程序中，您可以传递要删除的当前待办事项对象 ID

onClick ={() => deleteTodo(obj.id)}

现在在你的 deleteTodo function 你可以做

const deleteTodo = idToDelete => setTodos(currentTodos => currentTodos.filter(todo => todo.id !== idToDelete))

请注意，我已从this.props中删除了 this.props。 您正在使用功能组件。 所以你不应该使用this来访问道具。

所以你的代码必须是这样的

function App() {
  const [toDos,setToDos] = useState([])
  const [toDo,setToDo] = useState('')
  
  const deleteTodo = idToDelete => setTodos(currentTodos => currentTodos.filter(todo => todo.id !== idToDelete))

  return (
         ....
              <div className="right">
                <i onClick ={() => deleteTodo(obj.id)} className="fas fa-trash"></i>
              </div>
            </div>)
         ...
  );
}