Chakra-UI React Select All/Some 复选框

Question

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

我似乎无法添加两个以上的复选框，但仍然保留切换所有复选框的功能 and/or select 个单独的复选框。理想情况下，我希望能够使用 .map() 方法添加 x 个复选框，并能够 select 每个复选框以及所有复选框。非常感谢任何帮助。

不工作：

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

Answer 1

创建状态以跟踪所有选定的 ID。

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

这是使用 table:

的完整代码

 <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>

Chakra-UI React Select All/Some 复选框

Chakra-UI React Select All/Some Checkboxes

javascript

checkbox

nested-checkboxes

reactjs

chakra-ui