javascript - 单击删除按钮时删除所选索引处的项目-React

Question

我目前遇到一个问题，当我单击特定元素的删除按钮时，它每次只会删除列表数组中的第一项，而不是选定的一项。

对此的任何帮助将不胜感激！:)

import "./css/App.css";
import React, { useRef } from "react";

function App() {
  const [item, setItem] = React.useState("");
  const [list, updateList] = React.useState([]);

  const toDoItem = (item) => {
    let newItem = { text: item.target.value, key: Date.now() };
    setItem(newItem);
  };

  const addItem = () => {
    updateList((prevState) => [...list, item]);
    document.getElementById("Input").value = "";
  };

  const deleteItem = (index) => {
    updateList((prevState) => {
      let items = [...prevState];
      console.log(items);
      items.splice(index, 1);
      return items;
    });
  };

  return (
    <div className="App">
      <h2>Type a todo item you want to complete</h2>
      <input
        type="text"
        placeholder="Add a todo..."
        id="Input"
        onChange={toDoItem}
      />
      <button id="Add" onClick={addItem}>
        Add
      </button>
      {list.map((item, index) => {
        return (
          <ol key={index}>
            {item.text[0].toUpperCase() + item.text.slice(1).toLowerCase()}
            <button>Edit</button>
            <button id="Delete" onClick={deleteItem}>
              ✗
            </button>
            {/* <button onClick={test}>test</button> */}
          </ol>
        );
      })}
    </div>
  );
}

export default App;

标签： javascriptarraysreactjsindexingonclick

Answer 1

您在通话时忘记了通过索引deleteItem

onClick={() => deleteItem(index)}