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
        </CheckBox>
      </Stack>
    </>
  )
}

解决方法

创建一个状态来跟踪所有选定的 id。

 const [checkedVendorIds,setCheckedVendorIds] = React.useState([]);

这是使用表格的完整代码：

 <Table variant="simple">
                  <Thead>
                    <Tr>
                      <Th width="10px">
                        <Checkbox
                          isChecked={
                            checkedVendorIds.length ===
                            vendors.map(vendor => vendor.id).length
                          }
                          onChange={() => {
                            const vendorIds = vendors.map(vendor => vendor.id);
                            if (checkedVendorIds.length === vendorIds.length) {
                              setCheckedVendorIds([]);
                            } else {
                              setCheckedVendorIds(vendorIds);
                            }
                          }}
                        ></Checkbox>
                      </Th>
                      <Th>Vendors</Th>
                    </Tr>
                  </Thead>
                  <Tbody>
                    {vendors.map((vendor,index) => (
                      <Tr
                        key={vendor.id}
                        _hover={{ bg: bg }}
                        _groupHover={{ bg: bg }}
                        cursor="pointer"
                      >
                        <Td width="10px">
                          <Checkbox
                            isChecked={checkedVendorIds.includes(vendor.id)}
                            onChange={event => {
                              event.stopPropagation();
                              const index = checkedVendorIds.indexOf(vendor.id);

                              if (index > -1) {
                                setCheckedVendorIds([
                                  ...checkedVendorIds.slice(0,index),...checkedVendorIds.slice(index + 1)
                                ]);
                              } else {
                                setCheckedVendorIds([
                                  ...checkedVendorIds,vendor.id
                                ]);
                              }
                            }}
                          ></Checkbox>
                        </Td>
                        <Td>
                          <Editable
                            defaultValue={vendor.name}
                            onChange={value => {
                              console.log(value);
                              setIsChange(true);
                            }}
                            onSubmit={value => {
                              if (isChange) {
                                handleSave({ name: value },vendor.id);
                                setIsChange(false);
                              }
                              if (!value.length) window.location.reload();
                            }}
                            submitOnBlur={false}
                          >
                            <EditablePreview />
                            <EditableInput />
                          </Editable>
                        </Td>
                      </Tr>
                    ))}
                  </Tbody>
               </Table>