ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView

老规矩，话不多说，直接上实现方式
注意：本帅用的版本 “antd”: “4.16.13”,
前提代码如下

 const generateUUID = () => {
    let d = new Date().getTime();
    const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => {
      const r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
    });
    return uuid;
  };
  const arrs = [];
  for (let i = 20; i--; ) {
    const uuid = generateUUID();
    arrs.push({
      label: uuid,
      name: uuid,
      key: uuid,
    });
  }
  const [state, setstate] = useState([]);
  // setstate(arrs);
  useEffect(() => {
    setTimeout(() => {
      console.log(arrs, 'arrs');
      setstate(arrs);
    }, 200);
  }, []);

方式一：scrollToFirstError

//首先给Form添加一个属性 scrollToFirstError={true}
//然后给button按钮添加属性 htmlType="submit" 即可
//代码如下
<Form form={form} name="basic" scrollToFirstError={true}>
  <Form.Item
    id="sadfasf"
    label="asdfa"
    name="sadfasf"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  <Form.Item
    id="aaaa"
    label="aaaa"
    name="aaaa"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  {state.map((item) => {
    return (
      <Form.Item
        key={item.key}
        label={item?.label}
        name={item?.name}
        rules={[{ required: false, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>
    );
  })}
  <Button type="primary" htmlType="submit">
    Submit
  </Button>
</Form>;

方式二：onFinishFailed

//失败就会触发该方法
//代码如下：
<Form
  form={form}
  name="basic"
  onFinishFailed={() => {
  	//关键代码
    const errorList = (document as any).querySelectorAll(".ant-form-item-has-error");
    //由于校验失败ant会自动给失败表单项添加类名，直接获取即可
    errorList[0].scrollIntoView({
      block: "center",
      behavior: "smooth",
    });
  }}
  //注意：由于dom更新异步，可能会获取不到，可以在setTimeout()中操作，vue的使用nextTick()即可
>
  <Form.Item
    id="sadfasf"
    label="asdfa"
    name="sadfasf"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  <Form.Item
    id="aaaa"
    label="aaaa"
    name="aaaa"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  {state.map((item) => {
    return (
      <Form.Item
        key={item.key}
        label={item?.label}
        name={item?.name}
        rules={[{ required: false, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>
    );
  })}
  <Button type="primary" htmlType="submit">
    Submit
  </Button>
</Form>;

方式三：自定义表单项

很多情况下，表单项是通过接口获取渲染的，页面布局可能是自定义的，或嵌套多层div

//类似这种嵌套多层盒子,可能就会失效
           {state.map((item) => {
              return (
                <div>
                  <div>
                    <div>
                      <span></span>
                      <div>
                        <Form.Item
                          key={item.key}
                          label={item?.label}
                          name={item?.name}
                          rules={[{ required: false, message: 'Please input your password!' }]}
                        >
                          <Input.Password />
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
//这时候必须要改盒子绑定一定id才会生效
<Form form={form} name="basic" scrollToFirstError={true}>
  <Form.Item
    id="sadfasf"
    label="asdfa"
    name="sadfasf"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  <Form.Item
    id="aaaa"
    label="aaaa"
    name="aaaa"
    rules={[{ required: true, message: "Please input your password!" }]}
  >
    <Input.Password />
  </Form.Item>
  {state.map((item) => {
    return (
                <div id={item.name}>
                  <div>
                    <div>
                      <span></span>
                      <div>
                        <Form.Item
                          key={item.key}
                          label={item?.label}
                          name={item?.name}
                          rules={[{ required: false, message: 'Please input your password!' }]}
                        >
                          <Input.Password />
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
    );
  })}
  <Button type="primary" htmlType="submit">
    Submit
  </Button>
</Form>;

在Tabs遇到的问题

可能有个需求，切换对应的tabs，获取相应的表单列表，那么问题就来了，必填项校验失败后，自动滚到到第一个必填项只在第一个tab中生效，其他的不生效。所以我目前是通过销毁隐藏的dom来解决（destroyInactiveTabPane）
完整代码如下

    <Tabs destroyInactiveTabPane defaultActiveKey="1" onChange={onChange} tabPosition="left">
      <TabPane tab="Tab 1" key="1">
        <div className={styles.con} id="crfDetailContent">
          <Form
            form={form}
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            onFinishFailed={() => {
            //注意，用方式一也是可以的---scrollToFirstError
              let str = 'sadfasf';
              const errorDom: any = document.getElementById(str);
              errorDom.scrollIntoView({
                block: 'center',
                behavior: 'smooth',
              });
            }}
          >
            {console.log('state', state)}
            <hr style={{ marginTop: 30 }} />

            <div>
              <div>
                <div id="sadfasf">
                  <Form.Item
                    id="sadfasf"
                    label="asdfa"
                    name="sadfasf"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                  >
                    <Input.Password />
                  </Form.Item>
                </div>
              </div>
            </div>
            <div>
              <Form.Item
                id="aaaa"
                label="aaaa"
                name="aaaa"
                rules={[{ required: true, message: 'Please input your password!' }]}
              >
                <Input.Password />
              </Form.Item>
            </div>
            {state.map((item) => {
              return (
                <div>
                  <div>
                    <div>
                      <span></span>
                      <div>
                        <Form.Item
                          key={item.key}
                          label={item?.label}
                          name={item?.name}
                          rules={[{ required: false, message: 'Please input your password!' }]}
                        >
                          <Input.Password />
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form>
        </div>
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        <div className={styles.con} id="crfDetailContent">
          <Form
            form={form}
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            // onFinish={onFinish}
            onFinishFailed={() => {
              let str = 'sadfasf';
              const errorDom: any = document.getElementById(str);
              errorDom.scrollIntoView({
                block: 'center',
                behavior: 'smooth',
              });
            }}
          >
            <hr style={{ marginTop: 30 }} />

            <div>
              <div>
                <div id="sadfasf">
                  <Form.Item
                    id="sadfasf"
                    label="asdfa"
                    name="sadfasf"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                  >
                    <Input.Password />
                  </Form.Item>
                </div>
              </div>
            </div>
            <div>
              <Form.Item
                id="aaaa"
                label="aaaa"
                name="aaaa"
                rules={[{ required: true, message: 'Please input your password!' }]}
              >
                <Input.Password />
              </Form.Item>
            </div>
            {state.map((item) => {
              return (
                <div>
                  <div>
                    <div>
                      <span></span>
                      <div>
                        <Form.Item
                          key={item.key}
                          label={item?.label}
                          name={item?.name}
                          rules={[{ required: false, message: 'Please input your password!' }]}
                        >
                          <Input.Password />
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form>
        </div>
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>