javascript - 如何在不使用 id 的情况下删除 React 功能组件中的列表项

Question

我正在尝试在添加待办事项列表项后使用 React 创建一个简单的待办事项页面，我正在附加垃圾桶图标，当用户单击其所需时，其相应的列表项被删除，我想知道是否可以在不使用的情况下完成id，对于 jquery 中的 ex，它很简单 (this.remove )

 const [input, setValue] = useState("");
  const [todos, setTodos] = useState([]);
  // passing  entered
  const handleInput = (event) => {
    setValue(event.target.value);
  };

  const lp = (event) => {
    // let c = [1,2,34,55]

    event.preventDefault();
    // if no input nothing will happen return none
    if (!input) return;
    // using spread operator its used whenever we need to add array data to exiting array
    const newTodos = [...todos, input];

    setTodos(newTodos);
    // clearing input text
    setValue("");
  };
  const handeldel=(e) => {
//  how to delete
  
  }

  return (
    <div>
      <div class="input-group mb-3">
        <input
          className="form-control border-primary font-weight-bold"
          style={{ height: 60 }}
          placeholder="Enter Text here"
          type="text"
          value={input}
          onChange={handleInput}
        />
        <div class="input-group-append">
          <button
            className="input-group-append font-weight-bolder "
            style={{ fontSize: 20 }}
            onClick={lp}
          >
            {" "}
            <i class="fas fa-plus-square fa-2x p-2"></i>{" "}
          </button>
        </div>
      </div>

      {todos.map((x) => (
        <ol style={{ listStyle: "none" }}>
          <li className="font-weight-bolder table-bordered" style={{fontSize:20}}>
            {x} <i class="fas fa-trash-alt" onClick={handeldel}></i>
          </li>
        </ol>
      ))}
    </div>
  );
};

Answer 1

 const handeldel=(index) => {
  todos.splice(index, 1);
  }

todos.map((x, index) => (...
...
<i class="fas fa-trash-alt" onClick={(e)=>handeldel(index)}></i>