import React, { useState } from 'react';
import { Form, Button, Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const App = () => {
const [checkedList, setCheckedList] = useState([]);
const [form] = Form.useForm();
// 全选按钮的点击事件处理函数
const handleSelectAll = () => {
// 假设所有的checkbox值都在checkedList数组中
const allCheckboxValues = ['A', 'B', 'C', 'D'];
// 如果当前没有选中任何项,则全选;否则清空选中
const willChecked = checkedList.length === 0 ? allCheckboxValues : [];
setCheckedList(willChecked);
form.setFieldsValue({
'checkbox-group': willChecked
})
};
// 渲染Checkbox组件
const renderCheckboxes = () => {
const options = [
{ label: 'Option A', value: 'A' },
{ label: 'Option B', value: 'B' },
{ label: 'Option C', value: 'C' },
{ label: 'Option D', value: 'D' }
];
return options.map(({ label, value }) => (
<Checkbox key={value} value={value}>{label}</Checkbox>
));
};
return (
<Form form={form}>
<Form.Item name="checkbox-group" label="Checkbox Group">
<CheckboxGroup value={checkedList} onChange={setCheckedList}>
{renderCheckboxes()}
<Button onClick={handleSelectAll}>全选</Button>
</CheckboxGroup>
</Form.Item>
</Form>
);
};
export default App;
上述代码使用React和Ant Design实现了一个表单,其中包含了一个CheckboxGroup和一个“全选”按钮。点击“全选”按钮时,会根据当前是否有选中的项来决定是全选还是清空选中。
实际开发时Form.Item也是由数据遍历生成,遇到了以下问题:
1. 如果将Button按钮改成Checkbox全选,CheckBox全选的onChange事件会冒泡影响CheckboxGroup的onChange事件,使用e.stopPropagation无法阻止事件冒泡。
2. 如果将1中的CheckBox全选组件位置移动到CheckboxGroup外部Form.Item的内部,使用form.setFieldsValue无法正常回显。