如何解决在React.js中将复选框的值添加并移除为数组状态
我正在使用mui复选框组件,这就是我的显示方式:
<FormControl component="fieldset">
<FormGroup aria-label="position" column>
{sortedData.map((obj) => {
return (
<FormControlLabel
value="type"
control={<Checkbox color="primary"/>}
label={obj}
name={obj}
onChange={handleTypeCheckboxChange}
labelPlacement="end"
/>
);
})}
</FormGroup>
</FormControl>
现在此功能上的handleTypeCheckboxChange我想在用户选中或取消选中时添加或删除复选框的值。
这是我尝试执行的操作,但是没有用。它给了我NaN:
const [typeValue,setTypeValue] = useState([]) // the state array where I wanna store the checkbox checked values
const handleTypeCheckboxChange = (event) => {
let typeValuesArray = []
let index
if (event.target.checked) {
setTypeCheckboxCount(prevState => prevState + 1)
typeValuesArray.push(+(event.target.name))
} else {
setTypeCheckboxCount(prevState => prevState - 1)
index = typeValuesArray.indexOf(+(event.target.name))
typeValuesArray.splice(index,1)
}
setTypeValue(typeValuesArray)
}
我该如何解决?
解决方法
从push
和indexOf
方法参数中删除+号。
因为:
+'anystring' = NaN
(代表问题作者发布解决方案,将答案移至答案空间)。
此问题已解决。我将代码更改为此:
const handleTypeCheckboxChange = (event,index) => {
if (event.target.checked) {
setTypeCheckboxCount(prevState => prevState + 1)
setTypeValue([...typeValue,event.target.name])
} else {
setTypeCheckboxCount(prevState => prevState - 1)
setTypeValue(
typeValue.filter( v => v !== event.target.name)
)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。