如何使用onClick从对象数组中定位对象ID [重复]

Question

这是我的代码 - 正如你所看到的，我刚刚开始使用 React.js 和一般的编程。在这个我试图创建一个简单的待办事项列表，我希望能够通过单击列表项之一从中删除一些项目。我知道我的 onClick 中有一些错误/缺少代码，但无法确定如何定位正确的 id 来处理 onDeleteHandler...非常感谢 ofc。

const App = () => {

const [input, setInput] = useState('')
const [index, setIndex] = useState([])

const id = Date.now()

const onSubmitHandler = (event) => {
    event.preventDefault()

    if (input.length > 0)
        setIndex([...index, { input, id }])
    else
        alert("Write a proper activity, please!")

    setInput('')
}

const onChangeHandler = (event) => {
    setInput(event.target.value)
}

const onDeleteHandler = (id) => () => {
    let xxx = index.filter(item => item !== id)
    setIndex(xxx)
    console.log(xxx)
}


return (
    <div>
        <form className="App" onSubmit={onSubmitHandler}>
            <p>MY REACT TO DO LIST</p>
            <label>Activity : </label>
            <input type="text" value={input} onChange={onChangeHandler}></input>
            <input type="submit"></input>
        </form>
        <ul>
            {index.map((item, id) => <li key={id} onClick={onDeleteHandler}>{item.input}</li>)}
        </ul>
    </div>
)

}

Answer 1

改变

const onDeleteHandler = () => {
    console.log(id)
}

到

const onDeleteHandler = (id) => {
    console.log(id)
}

然后将onClick={onDeleteHandler}改为onClick={() => onDeleteHandler(id)}

看看这个：https://upmostly.com/tutorials/pass-a-parameter-through-onclick-in-react 了解更多信息