提问人：Alim Gölcük 提问时间：11/5/2022 更新时间：11/5/2022 访问量：506
如何使用一个复选框选中所有复选框并使用 use-state 将类添加到 React 中的父元素？
How can I check all checkboxes with one checkbox and add a class to their parent element in React using use-state?
问：
我正在尝试做一个待办事项应用程序，但有一次我完全被困住了。
到目前为止，这是我当前的页面：
简而言之，我将在上面的页面上向您解释我想要做什么。
我有文本输入，我在其中写下我的待办事项。
当我提交它时，它出现在下面的 li 元素中。有一个数组，这些字符串存储在那里并使用 map 方法打印。
文章左边有圆圈复选框，当我检查它们时，一个类被添加到一个“完成”的 li 元素中
到目前为止，我没有遇到任何问题。现在，文本输入的左侧有一个向下箭头。当我检查它时，我希望它选中下面的所有复选框，并将“completed”类添加到它们的 li 元素中。它的编码如下：
<input className = "toggle-all" type = "checkbox"/>
<label htmlFor = "toggle-all" >
Mark all as complete
</label>
这是我的App.js，两个组件。页脚并不重要。
主要组件，页脚不再重要。
标头组件
我正在努力解决的组件是该部分
我尝试了很多方法，但找不到解决方案。可能有太多的图片和解释，但我想让大家清楚。我想使用 usestate 来跟踪所有复选框，但如果解决方案不可行，我可以接受其他解决方案。
4.11.22
我在 2 天前创建了这个问题。在这两天里，我尝试了各种代码，但我无法让它们按照我想要的方式工作。
答：
1赞
Sujit Libi
11/5/2022
#1
不要创建字符串数组，而是将其设置为对象数组。其中对象可以是这样的：setTexts
let obj = {
text: "todo item 1",
ischecked: false
}
const [listItem, setListItem] = useState([])
在列表中添加新项目时，您可以这样做：
setListItem([...listItem, {text: "something to do another list", ischecked: false}])
检查单个项目调用方法时：onCheck(args)
const onCheck = (selectedItem) => {
let updatedList = listItem.map((item) => {
if(item.text === selectedItem.text){
return {
text: item.text,
ischecked: true
}
}
return item
})
setListItem([...updatedList])
}
最后回答你的问题。单击下拉箭头调用方法后：checkedAllToDoList()
const checkedAlToDoList = () => {
let updatedList = listItem.map((item) => {
return {
text: item,
ischecked: true
}
})
setListItem([...updatedList])
}
注意：完成流程，因为哪个方法应该作为道具传递 哪些组件
评论
1赞
Sujit Libi
11/5/2022
如果您也可以将唯一 ID 添加到新添加的项目对象中，那就更好了。在检查列表项时，如果像我在上面的代码示例中所做的那样比较 id 而不是文本会很棒。导致项目重复多次，这可能会导致您一次单击多个项目。这是上述样本中最坏的情况之一。要克服对对象列表项使用唯一 ID。
0赞
Alim Gölcük
11/7/2022
谢谢你，在你的帮助下我做了我想做的事，这个解释给了我很多启发。
评论