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无法正常回显。