使用antd将页面多选的对象出道后台

要将页面中多选的对象传输到后台，可以使用 Ant Design 的 Checkbox 组件和 Form 组件。下面给出一个示例：

1. 在页面中使用 Checkbox 组件，设置 checkboxOptions 和 checkedList 状态：

import React, { useState } from 'react';
import { Checkbox } from 'antd';

const plainOptions = ['Option 1', 'Option 2', 'Option 3'];
const defaultCheckedList = ['Option 1'];

function CheckboxGroup() {
  const [checkedList, setCheckedList] = useState(defaultCheckedList);

  const onChange = (checkedValues) => {
    setCheckedList(checkedValues);
  };

  return (
    <Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />
  );
}

export default CheckboxGroup;

在这个示例中，我们设置了一个多选框组件，包括了三个选项。默认情况下，第一个选项为选中状态。

2. 在 Form 组件中使用 CheckboxGroup 组件，设置 onFinish 事件：

import React from 'react';
import { Form, Button } from 'antd';
import CheckboxGroup from './CheckboxGroup';

function CheckboxForm() {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values.checkbox),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log('Success:', data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="checkbox">
        <CheckboxGroup />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

export default CheckboxForm;

在这个示例中，我们设置了一个表单，包括了多选框组件和提交按钮。当用户点击提交按钮时，会触发 onFinish 事件，该事件会获取表单中勾选的选项，并将其通过网络请求传输到后台。

3. 在后台接收并处理数据。

在这个示例中，我们使用了 fetch 函数来发送网络请求，并在网络请求成功或失败时打印日志。在后台接收到数据后，可以根据具体的业务需求进行处理。

希望这个回答能够帮到你！