Ant Design表单：如何实现字段取值与提交名称分离？

你之前用fieldKey的思路不对，这个属性是用来给Form内部的字段做唯一标识的——比如同一表单里有多个name相同的字段时才会用到，完全无法实现提交字段名的重命名。

不用在onFinish里手动映射的话，有两种可行方法：

方法1：通过getValueProps和getValueFromEvent关联嵌套字段 #

利用Form.Item的这两个属性，让组件读取嵌套的place.id值，同时选择新值时同步更新place.id和提交字段placeID：

import { Form, Select } from 'antd';

const YourForm = () => {
  const [form] = Form.useForm();
  
  return (
    <Form form={form}>
      <Form.Item
        label="Place"
        name="placeID"
        rules={[{ required: true }]}
        getValueProps={(value, allValues) => {
          // 给Select组件传递place.id的值作为默认选中值
          return { value: allValues?.place?.id };
        }}
        getValueFromEvent={(selectedValue) => {
          // 选择值时同步更新嵌套的place.id字段
          const currentPlace = form.getFieldValue('place') || {};
          form.setFieldsValue({ place: { ...currentPlace, id: selectedValue } });
          // 返回的值会作为placeID字段的提交值
          return selectedValue;
        }}
      >
        <Select {...placeSelectProps} />
      </Form.Item>
    </Form>
  );
};

方法2：监听字段变化自动同步 #

通过Form的onValuesChange监听提交字段placeID的变化，同步更新嵌套的place.id，初始化时也同步一次值：

import { Form, Select } from 'antd';
import { useEffect } from 'react';

const YourForm = () => {
  const [form] = Form.useForm();

  // 初始化时把place.id同步到placeID字段
  useEffect(() => {
    const placeId = form.getFieldValue(['place', 'id']);
    if (placeId) {
      form.setFieldsValue({ placeID: placeId });
    }
  }, []);

  // 监听placeID变化，同步更新place.id
  form.onValuesChange((changedValues) => {
    if (changedValues.placeID !== undefined) {
      const currentPlace = form.getFieldValue('place') || {};
      form.setFieldsValue({ place: { ...currentPlace, id: changedValues.placeID } });
    }
  });

  return (
    <Form form={form}>
      <Form.Item
        label="Place"
        name="placeID"
        rules={[{ required: true }]}
      >
        <Select {...placeSelectProps} />
      </Form.Item>
    </Form>
  );
};

这两种方法都能实现：组件读取嵌套的place.id值，提交时输出placeID字段，不需要在onFinish里手动做数据映射。

内容的提问来源于stack exchange，提问作者taraktikos