如何从我的待办事项列表中删除项目

Question

我正在尝试学习 React js，但我不知道如何从我的列表中删除一个项目，你能帮我吗？实际上，我并不专业，但我真的很想学习，我的代码可以正确地将一些新项目添加到我的列表中，但是当我点击他们的 checkbox/delete 按钮时我不知道如何删除它们.

 import React, { useState } from "react";
    const App = () => {
      const [NewTaskText, setNewTaskText] = useState("");
      const [Tasks, setTasks] = useState(["do a task", "samira"]);
    
      const addTask = (e) => {
        e.preventDefault();
        if (!NewTaskText) return;
        setTasks((currentTasks) => {
          return [...currentTasks, NewTaskText];
        });
        setNewTaskText("");
      };
    
      const onchangeInput = (e) => {
        const value = e.target.value;
        setNewTaskText(value);
      };
    
      return (
        <div className="row">
          <form onSubmit={addTask}>
            <div className="row col s6">
              <div className="input-field col s10">
                <textarea
                  id="textarea1"
                  className="materialize-textarea"
                  value={NewTaskText}
                  onChange={onchangeInput}
                ></textarea>
    
                <label htmlFor="textarea1">What needs to be done ?</label>
              </div>
            </div>
          
    
          <div className="row col s6">
            <br></br>
            <a className='waves-effect waves-light btn' href="/#" onClick={addTask}>
                <i className='material-icons left' >
                  add_circle
                </i>
                Add
              </a>
          </div>
          </form>
          <div className="row">
            <div className="row col s9">
              <ul className="collection with-header">
                <li className="collection-header">
                  <h4>Todo List</h4>
    
                  <form>
                    <div className="input-field">
                      <input id="search" type="search" required />
                      <label className="label-icon" htmlFor="search">
                        <i className="material-icons">search</i>Search
                      </label>
                      <i className="material-icons">close</i>
                    </div>
                  </form>
                </li>
                <label>
                 
                  {Tasks.map((item, i) => {
                    return (
                     
                      <li className="collection-item" key={i}>
                       
                        <input type="checkbox" />
                        <span>
                       
                          {item}
                          </span>
                      
                        <span>
                          <a href="#!" className="secondary-content">
                            <i className="material-icons" >delete</i>
                            <i className="material-icons">check_circle</i>
                          </a>
                        </span>
                     
                      </li>
                     
                    );
                  })}
                
                </label>
              </ul>
            </div>
          </div>
        </div>
      );
    };
    export default App;

Answer 1

您可以使用索引从数组中删除项目：

<i className="material-icons" onClick={() => handleDelete(i)}>delete</i>

并在 return 语句上方定义函数：

const handleDelete = i => {
  const taskList = [...Tasks]
  taskList.splice(i, 1)
  setTasks(taskList)
}

这里重要的是要知道，如果它是 object 或 array，则必须复制状态。因为如果您修改原始数组或对象，React 不会将其注册为更改，也不会重新渲染。这就是我 const taskList = [...Tasks] 的原因。您还可以使用像 lodash 这样的库，它提供了一些处理对象和数组的巧妙方法

Answer 2

只需向应该删除项目的按钮添加一个 onClick 处理程序

<i className="material-icons" onClick={ () => {
    setTasks((prevTasks) => {
        const updatedPrevTasks = [...prevTasks];
        updatedPrevTasks.splice(i, 1);

        return updatedPrevTasks;
    });
}}>delete</i>

如何从我的待办事项列表中删除项目

How can I delete an item from my todolist

javascript

reactjs

react-hooks

use-state