需求背景:当表单域在页面的指定区域,且提交按钮在表单域外。触发滚动定位。

本文章不再赘述整个问题解决的过程,只记录结果~

Antd Disscussion 讨论地址https://github.com/ant-design/ant-design/discussions/35290

代码沙盒演示地址https://codesandbox.io/s/zhu-ce-xin-yong-hu-antd-4-20-1-forked-vcm1h4?file=/demo.js:0-8140

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Checkbox, Button, Affix } from "antd";

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

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

  const handleSubmit = () => {
    form.submit();
  };
  
  return (
    <div>
      <Form form={form} onFinish={onFinish} scrollToFirstError>
        <Form.Item name="agreement" valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value
                  ? Promise.resolve()
                  : Promise.reject(new Error("Should accept agreement"))
            }
          ]}
          {...tailFormItemLayout}
        >
          <Checkbox>
            I have read the <a href="">agreement</a>
          </Checkbox>
        </Form.Item>
      </Form>
      <Affix offsetBottom={0}>
        <div style={{ background: "#fafafa" }}>
          <Button type="primary" onClick={handleSubmit}>
            Register
          </Button>
        </div>
      </Affix>
    </div>
  );
};

export default () => <RegistrationForm />;

简单来讲,这里赘述下,官方文档中所没有的另外一种方案:

背景:提交按钮未内置进Form标签中~

在外部提交事件中触发form.submit()事件

const handleSubmit = () => {
    form.submit();
  };

收集表单数据使用onFinish事件:

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

常规标准用法:官方文档地址: https://ant.design/components/form-cn/#components-form-demo-register

致谢:感谢afc163 (antd maintainer)给予的答案以及指导