控制 Material UI 中的多个复选框

Question

我有一个带有几个复选框的下拉菜单，我试图在每个复选框上添加 onClick 事件。但是当我选中其中一个复选框时，所有复选框都会被选中。这就是我尝试做的：

const [isChecked, setIsChecked] = React.useState(false);

const isCheckboxChecked = () => {
    setIsChecked(isChecked ? false : true)
}

return menuItems.map((item, index) => (
        <React.Fragment>
            <MenuItem
                value={item.value}
                selected={item.value === value}
                key={index}
            >
                <Checkbox
                    key={index}
                    checked={isChecked}
                    onClick={() => isCheckboxChecked()}
                >
                    <Label>{item.label}</Label>
                </Checkbox>
            </MenuItem>
            {index === 2 || index === 3 ? <hr /> : null}
        </React.Fragment>
    ));

据我了解，所有复选框都使用相同的状态isChecked，我想知道如何使它们独立。

Answer 1

您可以在状态变量中创建一组检查值，isChecked而不仅仅是一个布尔值。我已将您的isCheckboxChecked方法重命名为更合适的名称toggleCheckboxValue，现在它采用一个index参数作为目标并切换相应的复选框值。

isChecked现在使用数组填充该值menuItems，每个复选框从创建的数组中获取一个元素，最后，您需要传递index给onClick复选框的事件处理程序。

const [isChecked, setIsChecked] = React.useState(menuItems.slice().fill(false));

const toggleCheckboxValue = (index) => {
    setIsChecked(isChecked.map((v, i) => (i === index ? !v : v)));
}

return menuItems.map((item, index) => (
    <React.Fragment>
        <MenuItem value={item.value} selected={item.value === value} key={index}>
            <Checkbox key={index} checked={isChecked[index]}
                      onClick={() => toggleCheckboxValue(index)}>
                <Label>{item.label}</Label>
            </Checkbox>
        </MenuItem>
        {index === 2 || index === 3 ? <hr /> : null}
    </React.Fragment>
));

注意：如果数组的长度menuItems动态变化，则必须进行isChecked更新toggleCheckboxValue。