时间戳

首页 > 解决方案 > 在 Material UI 中控制多个复选框

reactjs - 在 Material UI 中控制多个复选框

问题描述

我有一个带有几个复选框的下拉菜单，我正在尝试在每个复选框上添加 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，我想知道如何使它们独立。

标签： reactjscheckboxmaterial-ui

解决方案

您可以在状态变量中创建一组检查值，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则必须相应地更新。isCheckedtoggleCheckboxValue

推荐阅读