如何在ReactJS的functional component中管理4复选框的状态？
如何在ReactJS的functional component中管理4复选框的状态？
提问于 2019-12-18 22:58:37
如何创建一个恰好有4个复选框的功能组件？我创建了一个动态映射数组，并使用以下命令设置它的值：
const [checked, setChecked] = useState([false, false, false, false])然后，对于一个函数，我改变了它的状态，类似于：
const checkboxes = array.map( (el, index) => {
return <Checkbox
checked={checked[index]}
onChange={checkedHandler}/>
}这是处理程序：
const checkedHandler = (event, index) => {
setChecked(...)
//Well, here I don't know how change the particular value of the array...
}或者我必须为每个复选框选中状态创建一个useState？如果有必要，如何将此复选框的状态传递给父组件？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-12-18 23:05:25
您正在以错误的方式调用checkedHandler。您必须：
onChange={checkedHandler}你应该有：
onChange={() => {checkedHandler(index)}}在处理程序本身中，您应该复制当前数组以防止其发生变化，并更改indexed数组的值：
const checkedHandler = (index) => {
const newChecked = [...checked];
newChecked[index] = !checked[index]; // toogle the checkbox
setChecked(newChecked);
}Stack Overflow用户
发布于 2019-12-18 23:07:03
将id分配给每个复选框，如id="1"、id="2"等。
那么你的checkedHandler()函数就像这样：
checkedHandler(event) {
const newChecked = [...checked]
newChecked[parseint(event.target.id) - 1] = true
setChecked(newChecked)
}Stack Overflow用户
发布于 2019-12-18 23:05:55
有很多方法可以做到这一点，如果你的情况很简单，你可以只浅拷贝数组，只改变你想要的索引。
let newChecked = [...checked]
newChecked[index] = value
setChecked(newChecked)但对于更复杂的情况，请查看Correct modification of state arrays in ReactJS
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59394697
复制相关文章
相似问题
腾讯云开发者
