antd的表单checkbox实现全选问题？

Question

checkbox.group在表单全选的问题，在外面包一层可以实现全选，但是无法获取到表单内该项的值，不内嵌div的话，全选有问题，这种怎么处理
以下为测试代码

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Checkbox, Form, Select } from "antd";

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 }
};

const App: React.FC = () => {
  const [formInstance] = Form.useForm();
  const [value, setValue] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const option = [
    {
      label: "A",
      value: 1,
      id: 1
    },
    {
      label: "B",
      value: 2,
      id: 2
    },
    {
      label: "C",
      value: 3,
      id: 3
    }
  ];
  const onSubmit = () => {
    // setValue([1]);
    formInstance.validateFields().then((values) => {
      // values就是表单中输入的值
      console.log(values);
    });
  };
  const onCheckAllChange = (e) => {
    setValue(e.target.checked ? option.map((item) => item.value) : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  const onChange = (list) => {
    setValue(list);
    setIndeterminate(!!list.length && list.length < option.length);
    setCheckAll(list.length === option.length);
  };

  return (
    <Form name="validate_other" {...formItemLayout} form={formInstance}>
      <Form.Item label="Plain Text">
        <span className="ant-form-text">China</span>
      </Form.Item>
      <Form.Item
        name="select"
        label="Select"
        hasFeedback
        rules={[{ required: true, message: "Please select your country!" }]}
      >
        <Select placeholder="Please select a country">
          <Option value="china">China</Option>
          <Option value="usa">U.S.A</Option>
        </Select>
      </Form.Item>
      <Form.Item name="checkbox" label="">
        <Checkbox
          indeterminate={indeterminate}
          onChange={onCheckAllChange}
          checked={checkAll}
        >
          Check all
        </Checkbox>
        <Checkbox.Group options={option} value={value} onChange={onChange} />
      </Form.Item>

      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
        <Button type="primary" onClick={onSubmit}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

Answer 1

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Checkbox, Form, Select } from "antd";

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 }
};

const App: React.FC = () => {
  const [formInstance] = Form.useForm();
  const option = [
    {
      label: "A",
      value: 1,
      id: 1
    },
    {
      label: "B",
      value: 2,
      id: 2
    },
    {
      label: "C",
      value: 3,
      id: 3
    }
  ];
  const onSubmit = () => {
    formInstance.validateFields().then((values) => {
      console.log(values);
    });
  };
  const onChange = (list) => {
    formInstance.setFieldsValue({ checkbox: list });
  };

  return (
    <Form name="validate_other" {...formItemLayout} form={formInstance}>
      <Form.Item label="Plain Text">
        <span className="ant-form-text">China</span>
      </Form.Item>
      <Form.Item
        name="select"
        label="Select"
        hasFeedback
        rules={[{ required: true, message: "Please select your country!" }]}
      >
        <Select placeholder="Please select a country">
          <Option value="china">China</Option>
          <Option value="usa">U.S.A</Option>
        </Select>
      </Form.Item>
      <Form.Item name="checkbox" label="">
        <Checkbox.Group options={option} onChange={onChange}>
          <Checkbox
            value="all"
            onChange={(e) => {
              let value = e.target.checked ? option.map((item) => item.value) : [];
              formInstance.setFieldsValue({ checkbox: value });
            }}
          >
            Check all
          </Checkbox>
        </Checkbox.Group>
      </Form.Item>

      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
        <Button type="primary" onClick={onSubmit}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;