Chakra-UI React 选择所有/一些复选框答案

【问题标题】：Chakra-UI React Select All/Some CheckboxesChakra-UI React 选择所有/一些复选框
【发布时间】：2021-04-08 23:21:16
【问题描述】：

我正在尝试在他们的文档中的 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>
    </>
  )
}

【问题讨论】：

标签： javascript reactjs checkbox chakra-ui nested-checkboxes

【解决方案1】：

创建一个状态来跟踪所有选定的 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>

【讨论】：