需求背景:当表单域在页面的指定区域,且提交按钮在表单域外。触发滚动定位。
本文章不再赘述整个问题解决的过程,只记录结果~
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
)给予的答案以及指导