[英]Chakra-UI React Select All/Some Checkboxes
我正在尝试在他们的文档中的 Chakra-UI 的“不确定”复选框示例中添加更多复选框: https://chakra-ui.com/docs/form/checkbox
我似乎不能添加两个以上的复选框,并且仍然保留切换所有复选框和/或 select 单个复选框的功能。 理想情况下,我希望能够使用 a.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>
</>
)
}
创建一个 state 来跟踪所有选定的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.