如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。