小编Jon*_*Jon的帖子

Chakra-UI React 选择全部/部分复选框

我正在尝试在其文档中的 Chakra-UI 的“不确定”复选框示例中添加更多复选框:https://chakra-ui.com/docs/form/checkbox

我似乎无法添加两个以上的复选框,但仍然保留切换所有复选框和/或选择单个复选框的功能。理想情况下,我希望能够使用 .map() 方法添加 x 个复选框,并且能够单独选择每个复选框以及所有复选框。任何帮助是极大的赞赏。

不工作:

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([false, false, false])

  const allChecked = checkedItems.every(Boolean)
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked

  return (
    <>
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
      >
        Parent Checkbox
      </Checkbox>
      <Stack pl={6} mt={1} spacing={1}>
        <Checkbox
          isChecked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
        >
          Child Checkbox 1
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
        >
          Child Checkbox 2
        </Checkbox>
          <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[1], e.target.checked])}
        >
          Child Checkbox 3 …
Run Code Online (Sandbox Code Playgroud)

javascript checkbox nested-checkboxes reactjs chakra-ui

5
推荐指数
1
解决办法
9991
查看次数