Javascript 使用<；中的删除按钮删除映射元素中的当前Todo；李>；不起作用

我正试图从头开始创建我的第一个待办事项列表。这意味着绝对没有教程或复制代码，这更像是对我自己的测试

然而，我遇到了一点麻烦。目前我的应用程序就是这样工作的

一个输入组件将允许用户输入todo，它包含一个提交按钮。提交todo时，道具将传递给Todos.js组件，该组件包含一个“映射”，将所有todo映射到一个页面上，它将在其中呈现一个包含todo的LI，LI将包含一个删除按钮

然而，我似乎不知道如何使用删除按钮删除todo，有人能帮我指出正确的方向吗

代码：

Todos.js

import React, { Component } from "react"

const Todos = (props) => {
  const deleteTodo = (e) => {
    console.log(e)
  }

  return (
    <div class="todo_list">
      <ul>
        {props.todos.map((todo) => {
          return (
            <li key={todo} className="new_todo">
              {todo}
              <button id="todo_del" onClick={deleteTodo}>
                Delete
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Todos

import React，{Component}来自“React”
常量Todos=（道具）=>{
常量deleteTodo=（e）=>{
控制台日志（e）
}
返回(

{props.todo.map（（todo）=>{
返回(

{todo}
删除

)
})}

)
}
导出默认TODO

Input.js

import React, { useState } from "react"

import Todos from "./Todos"

const Input = (props) => {
  const [todo, setTodo] = useState([])
  const [input, setInput] = useState("")

  const setInputState = (e) => {
    setInput(e.target.value)
    console.log(input)
  }

  const addTodo = (e) => {
    e.preventDefault()
    setTodo([...todo, input])
    setInput("")
  }

  return (
    <>
      <div class="input">
        <form>
          <input
            type="text"
            id="todo_input"
            onChange={setInputState}
            value={input}
          />
          <input type="submit" id="submit_btn" onClick={addTodo} />
        </form>
      </div>
      <div class="todo_list">
        <Todos todos={[...todo]} />
      </div>
    </>
  )
}

export default Input

import React，{useState}来自“React”
从“/TODO”导入TODO
常量输入=（道具）=>{
const[todo，setTodo]=useState（[]
常量[input，setInput]=useState（“”）
const setInputState=（e）=>{
设置输入（如目标值）
console.log（输入）
}
常量addTodo=（e）=>{
e、 预防默认值（）
setTodo（[…todo，输入]）
setInput（“”）
}
返回(
)
}
导出默认输入

既然您提到这是一项针对您自己的练习，我不确定要使用多少详细信息，但现在开始

TODO列表由输入组件中的useState钩子维护。您可以将函数作为道具传递

---

还要记住，

map（）

将允许您同时传入一个值（todo）和第二个参数（索引）。然后您映射的组件将知道索引，并可以将其传递到您的

deleteTodo（）

函数中。

谢谢，我现在更进一步了！现在，我似乎无法理解一旦某个特定的LI成为目标后，删除该LI的功能。它不是数组的一部分，所以我不能使用Splice（我知道，我知道，它应该是数组的一部分）知道我会使用什么样的函数吗？Splice是一种方法。您有Li的索引，因此可以将其传递给确实了解数组的函数，并将索引传递给delete函数。