react+ant.design Form表单校验失败自动滚动到

1. 一定要在Form标签上添加scrollToFirstError属性，触发要使用Button上面的htmlType="submit"方可。注意：Button要在Form标签内部包裹

<Form
  form={form}
  scrollToFirstError
  onFinish={onSubmit}
>
  <Row>
    <Col span={8}>
      <Item
        name="name"
        {...layout}
        label="承租方名称（中）"
        rules={[{ required: true, message: '请输入' }]}
        >
        <Input />
      </Item>
    </Col>
    <Col span={8}>
      <Item {...layout} name="english_name" label="承租方名称（英）">
        <Input />
      </Item>
    </Col>
  </Row>
  <Button loading={loading} type="primary" htmlType="submit">
</Form>

缺点：不一定能准确的滑动到第一个校验不通过的Form表单
优点：使用方便，代码简洁

2.使用Form提供的校验不通过的事件来处理

<Form
  form={form}
  onFinish={onSubmit}
  onFinishFailed={() => {
    // 核心代码
    const errorList = (document as any).querySelectorAll(".ant-form-item-has-error");
    // 由于校验失败ant会自动给失败表单项添加类名，直接获取即可
    errorList[0].scrollIntoView({
      block: "center",
      behavior: "smooth",
    });
  }}
>
  <Row>
    <Col span={8}>
      <Item
        name="name"
        {...layout}
        label="承租方名称（中）"
        rules={[{ required: true, message: '请输入' }]}
        >
        <Input />
      </Item>
    </Col>
    <Col span={8}>
      <Item {...layout} name="english_name" label="承租方名称（英）">
        <Input />
      </Item>
    </Col>
  </Row>
  // 这个时候不一定需要把Button放到Form标签内部也不一定需要使用htmlType属性
  <Button loading={loading} type="primary" htmlType="submit">
</Form>

缺点：需要获取DOM 代码量增多
优点：能够很完美的实现需求同时弥补方案一的短板

总结：如果方案一能满足您的需求建议使用方案一如果不行再使用方案二，首选方案一