删除映射元素中的当前待办事项，删除按钮<li>不起作用

Question

我正试图从SCRATCH创建我的第一个Todo列表。这意味着绝对没有教程或复制代码，这对我自己来说更像是一个测试。

然而，我遇到了一些困难。目前我的应用程序是这样工作的。

制作了一个输入组件，允许用户输入待办事项，其中包含一个提交按钮。提交todo时，该道具将传递给Todos.js组件，该组件包含一个"map"，将所有todo映射到一个页面上，它将在包含该todo的内部呈现一个LI，该LI将包含一个删除按钮。

然而，我似乎不知道如何使用删除按钮删除待办事项，有人能帮我指明正确的方向吗？

代码：

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

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

Answer 1

由于您提到这是一个针对自己的练习，我不确定要使用多少细节，但这里是。

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

还要记住，map()将允许您同时传入一个值(todo(和第二个参数(index(。然后，您正在映射的组件将知道索引，并可以将其传递到deleteTodo()函数中。