reactjs - MUI：跟踪多个复选框状态

Question

我在使用 MUI 的选项卡中有一个复选框元素。切换选项卡时，它会删除复选框视觉效果。

{listItem.map((checkbox, index) => {
          return (
            <FormControlLabel className="twocolelement"
        control={
          <Checkbox
          key={(index) + (checkbox.Name)}
            name={checkbox.Name}
            value={checkbox.Weight}
            id={checkbox.Category}
            checked={isChecked==index}
            color="primary"
            onChange={event => handleCheckboxChange(index, event)}
            onClick={() => isCheckboxChecked(index)}
          />
        }
        label={(checkbox.Brand) + ' ' + (checkbox.Name)}
      />

          );
        })}

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

  const isCheckboxChecked = (index) => {
    setIsChecked(index)
    console.log(index)
}

这会保持状态，但它就像一个单选按钮（只允许一个选择）

在选项卡之间移动时如何保持复选框状态（选中）？

标签： reactjsmaterial-ui

Answer 1

如果要存储所有的Checkboxs 状态：

const [isChecked, setIsChecked] = React.useState(() =>
  listItem.map((i) => false)
);

const isCheckboxChecked = (index, checked) => {
  setIsChecked((isChecked) => {
    return isChecked.map((c, i) => {
      if (i === index) return checked;
      return c;
    });
  });
};
console.log(isChecked);

return (
  <div>
    {listItem.map((checkbox, index) => {
      return (
        <FormControlLabel
          key={index + checkbox.name}
          className="twocolelement"
          control={
            <Checkbox
              name={checkbox.name}
              value={checkbox.weight}
              id={checkbox.category}
              checked={isChecked[index]}
              color="primary"
              onChange={(e) => isCheckboxChecked(index, e.target.checked)}
            />
          }
          label={checkbox.name}
        />
      );
    })}
  </div>
);