近期在开发团队官网的过程中碰到了需要运用表单的场景，去年学习React时是通过网上的视频教程自学的，课程的小demo中用户输入数据的收集是通过input框，结合ref实现的，因此形成了思维定式，每一次收集用户数据都用这种方式。一个偶然的机会才猛然想起使用表单，功能开发完后写下此文，记录这次学习的内容。
一、Antd表单即基本使用方式
图片1.png
图片2.png
Form API
Form.useForm()：创建form控制实例，不提供时会自动创建
onFinish：提交表单且数据验证成功后回调事件
FormInstance（表单实例） API
validateFields：触发表单校验
getFieldValue：获取表单指定字段的值
Form.Item API
name：字段名，在getFieldValue传入这个值可以获取字段的数据
label：字段的标签
提交表单的方式
1、用Antd的Button组件，传入htmlType="submit"，点击按钮即可校验并提交，并触发onFinish事件；
2、testForm.submit()，同样会触发onFinish事件；
3、发送AJAX请求提交，在按钮的回调中getFieldValue获取表单数据，以query或body参数的形式发送请求。这个方法需要手动validateFields校验数据并且不会触发onFinish事件。
关于Antd表单的内容有补充时另写。
二、表单提交的几种方式（原生）
1、HTML
通过在form标签或其提交按钮中的action、method、submit等属性来提交表单
2、js
通过js中调用submit函数提交表单，action、method等属性在form标签中定义
3、AJAX
通过DOM技术收集表单数据，再作为请求的query或body提交。
三、以表单方式提交和AJAX请求的区别
1、刷新
form提交，在更新数据完成后，会转到一个空白页面再对原页面进行提交后处理，即便是提交给自己本身的页面，从这点来说form提交用户体验较差；AJAX是局部刷新，不会跳转，刷新效率更高，用户体验更好。
2、支持
form只支持GET/POST两种请求。
3、适用场景
form适合前后端不分离项目；AJAX适合前后端分离项目。
参考资料和原文
https://blog.csdn.net/Coder_Xy/article/details/124747475
