antd2.×表单检验如果跳转到未检验通过的地方

Antd 2.x 表单校验可以通过 `validateFields` 方法来触发，如果校验未通过，可以通过 `getFieldError` 方法获取错误信息，并将焦点设置到出错的表单控件上。以下是示例代码：

import { Form, Input, Button } from 'antd';

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

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const handleClick = () => {
    form.validateFields().catch(() => {
      const errorFields = form.getFieldsError();
      const firstErrorField = errorFields.find((item) => item.errors.length);
      if (firstErrorField) {
        const control = form.getFieldInstance(firstErrorField.name);
        control.focus();
      }
    });
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="Password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" onClick={handleClick}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

首先，我们使用 `form.validateFields()` 方法触发表单校验。如果校验未通过，这个方法会返回一个 Promise，我们可以通过 `.catch()` 方法捕获校验错误。

在错误处理中，我们首先使用 `form.getFieldsError()` 方法获取所有的表单控件的错误信息。然后，我们使用 `Array.find()` 方法找到第一个存在错误信息的表单控件，然后使用 `form.getFieldInstance()` 方法获取这个表单控件的实例。最后，我们使用 `control.focus()` 方法将焦点设置到这个表单控件上，从而达到跳转到未检验通过的地方的目的。