当我点击按钮React时，我无法指定列表项

Question

我目前正在处理一个待办事项列表。我试图做的是，当我点击"；已完成"；按钮，我想使用CSS"；"线通过"；属性。但是，当我按下按钮时，所有列表项都会被选中。我该如何解决这个问题？如果答案是代码，我将不胜感激。

这是表单组件：

const [draw, setDraw] = useState("notDrawed")
const whenClicked = () => {
setDraw("drawed")
}
return (
<div id="container">
<h1>todos</h1>
<form onSubmit={onSubmit} >
<input placeholder="What needs to be done?" name="todo" value={form.todo} onChange={handleChange} />
<List forCurrentList={currentList} moveDraw={draw} />

<div> 

<button>Add</button>
<button type="button">All</button>
<button type="button">Active</button>
<button type="button" id="completed" onClick={whenClicked} >
Completed</button>

</div>

</form>

这是列出项目的列表组件：

import React, {useState} from "react"
function List({ forCurrentList, moveDraw}) {
const [active, setActive] = useState(false)
const handleList = () => {
setActive(true)
if (active === true) {
setActive(false)
}
}
return (
<div>
<ul>
{forCurrentList.map((item, index) => {
return (
<React.Fragment key={index}>
<li className={moveDraw} onClick={handleList} > {item.todo} </li>
</React.Fragment>
)

})}
</ul>
</div>
)
}
export default List

最后，这是CSS文件：

.notDrawed {
list-style: none;
border-bottom: solid 2px rgba(128, 128, 128, 0.672);
padding-bottom: 2px;
padding-top: 7px;
margin-right: 25px;
.drawed {
list-style: none;
border-bottom: solid 2px rgba(128, 128, 128, 0.672);
padding-bottom: 2px;
padding-top: 7px;
margin-right: 25px;
color: grey;
text-decoration: line-through;
}
}

Answer 1

完成按钮和绘制状态对于所有列表项都是通用的。尝试将此状态切换切换到子项，以便在每个列表项上都具有单独的drawed notDrawed状态。