antd react form表单 执行onFinish方法时 formData数据没有传递给后端的原因

可能是因为您在提交表单时没有将 formData 数据传递给后端。您可以尝试在提交表单时将 formData 数据作为参数传递给后端接口。

具体实现方式可以参考以下步骤：

1. 在表单中设置 onFinish 方法，并将 formData 作为参数传递给 onFinish 方法。

<Form onFinish={(formData) => this.handleSubmit(formData)}>
  // 表单项
</Form>

2. 在 handleSubmit 方法中将 formData 数据作为参数传递给后端接口。

handleSubmit = (formData) => {
  // 发送请求
  axios.post('/api/submit', formData)
    .then(response => {
      // 处理响应
    })
    .catch(error => {
      // 处理错误
    });
}

请注意，您需要根据您的具体代码和后端接口进行调整。如果您仍然无法解决问题，请提供更多细节和代码以便我更好地帮助您。

相关问题

react antd form表单点击确定时可以自动定位到没有填写的地方

可以使用 Ant Design Form 组件的 validateFields 方法来实现这个功能。当用户点击表单的提交按钮时，可以先调用 validateFields 方法来进行表单校验，如果校验失败，则可以通过 getFieldError 方法获取错误信息，并且可以通过 getFieldsError 方法获取所有字段的错误信息。接着，可以使用 scrollIntoView 方法将第一个出现错误的表单项滚动到可视区域内。

以下是一个示例代码：

import { Form } from 'antd';

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

  const handleSubmit = async () => {
    try {
      await form.validateFields();
      // 校验通过，提交表单
    } catch (error) {
      // 校验失败，获取所有字段的错误信息
      const errors = error.errors;
      // 获取第一个出现错误的表单项
      const firstErrorField = errors[0].name[0];
      // 滚动到第一个出现错误的表单项
      const firstErrorElement = document.getElementsByName(firstErrorField)[0];
      firstErrorElement.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <Form form={form}>
      // 表单项
      <button type="button" onClick={handleSubmit}>
        提交
      </button>
    </Form>
  );
};

当用户点击提交按钮时，如果表单校验失败，会滚动到第一个出现错误的表单项。如果表单校验通过，则可以提交表单。

react antd form表单点击确定时可以自动定位未填项

可以实现自动定位未填项的功能，具体实现方式如下：

1. 首先，在表单中添加一个 ref 属性，用于获取表单的实例。

2. 在表单提交的回调函数中，通过表单实例的 getFieldsError() 方法获取所有未填项的错误信息。

3. 如果存在未填项的错误信息，则遍历所有表单项，通过 getFieldDecorator() 方法获取表单项的装饰器，并调用装饰器的 validateFields() 方法，触发表单项的校验。

4. 在校验完成后，通过表单实例的 getFieldInstance() 方法获取表单项的实例，并调用其 focus() 方法，使其获得焦点。

5. 最后，将表单滚动到未填项所在的位置，使用户能够看到未填项。

以下是代码实现的示例：

import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';

class MyForm extends Component {
  formRef = React.createRef();

  handleSubmit = e => {
    e.preventDefault();
    this.formRef.current.validateFields((errors, values) => {
      if (errors) {
        const fieldsError = this.formRef.current.getFieldsError();
        const firstErrorField = Object.keys(fieldsError).find(field => fieldsError[field]);
        const firstErrorNode = this.formRef.current.getFieldInstance(firstErrorField);
        firstErrorNode.focus();
        const formNode = this.formRef.current.getFormNode();
        formNode.scrollTo({
          top: firstErrorNode.offsetTop - formNode.offsetTop,
          behavior: 'smooth'
        });
      }
      // 如果校验通过，则可以在这里提交表单数据
    });
  };

  render() {
    return (
      <Form ref={this.formRef} onSubmit={this.handleSubmit}>
        <Form.Item
          label="姓名"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入姓名'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="年龄"
          name="age"
          rules={[
            {
              required: true,
              message: '请输入年龄'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    );
  }
}

export default MyForm;