在 Reactjs 中将复选框的值附加和删除到数组状态中答案

【问题标题】：Append and remove the value of checkbox into an array state in Reactjs在 Reactjs 中将复选框的值附加和删除到数组状态中
【发布时间】：2020-12-01 22:57:39
【问题描述】：

我正在使用 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)
}

我该如何解决这个问题？

【问题讨论】：

你应该在codesandbox上重现这个，这样其他人会更容易赶上

标签： arrays reactjs checkbox

【解决方案1】：

从 push 和 indexOf 方法参数中删除 + 号。
因为： +'anystring' = NaN

【讨论】：

好的，所以我删除了它，但它没有附加值或正确删除它
数组中始终只有一个值，当我取消选中任何框时，数组大小变为 0。即使选中了其他一些框。
setTypeValue([...typeValue, event.target.name]) 是反模式。您不应该将状态用于自己的更新。而是使用 `setTypeValue(prevTypes => [...prevTypes, event.target.name])

【解决方案2】：

（代表问题作者发布解决方案，将答案移至答案空间）。

这已经解决了。我将代码更改为：

 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)
            )


        }

        
    }

【讨论】：