react antd from表单全选按钮Button触发CheckBox状态回显
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无法正常回显。