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;