Ant Design Checkbox 禁用: 限制选择数量 (最大 5 个)

使用一个 state 来记录已选中的 checkbox 数量，然后在 onChange 事件中判断已选中的数量是否超过五个，超过则禁用所有 checkbox。\n\n下面是一个示例代码：\n\njsx\nimport React, { useState } from 'react';\nimport { Checkbox } from 'antd';\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3' },\n { label: 'Option 4', value: '4' },\n { label: 'Option 5', value: '5' },\n { label: 'Option 6', value: '6' },\n { label: 'Option 7', value: '7' },\n { label: 'Option 8', value: '8' },\n];\n\nconst App = () => {\n const [selectedOptions, setSelectedOptions] = useState([]);\n const [disableCheckboxes, setDisableCheckboxes] = useState(false);\n\n const handleChange = (checkedValues) => {\n setSelectedOptions(checkedValues);\n setDisableCheckboxes(checkedValues.length >= 5);\n }\n\n return (\n <CheckboxGroup\n options={options}\n value={selectedOptions}\n onChange={handleChange}\n disabled={disableCheckboxes}\n />\n );\n}\n\nexport default App;\n\n\n在上面的代码中，使用 useState 来创建两个 state：selectedOptions 用于记录已选中的 checkbox 的值，disableCheckboxes 用于控制是否禁用 checkbox 们。在 handleChange 函数中，首先更新 selectedOptions 的值，然后通过判断 selectedOptions 的长度来更新 disableCheckboxes 的值，如果已选中的数量超过五个，则禁用所有 checkbox。最后在 CheckboxGroup 组件中，使用 value 属性来设置已选中的 checkbox，onChange 属性来绑定 handleChange 函数，disabled 属性来控制是否禁用 checkbox 们。