antd3怎么用都很熟了。
但是antd4表单组件换了很多新东西，而且还是用hook或者ts去实现的。感觉看了一下文档脑子都乱了，因此整理一下记在这里。

会有一些关于3.x版本和4.x版本的Form使用对比。
把很多原本的函数实现，Form.create生成的表单实例东西都给放进了组件属性里。
这意味着啥呢。。
你再也不用用getFieldDecorator去包裹form组件了，可以直接在formItem里对表单填写进行操作。

先看看antd里怎么写form的API吧
https://ant.design/components/form-cn/

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管

1、最普通的用法

现在最普通的用法，不用Form.create()注入，也可以使用方便快捷的表单函数了，做简单的表单校验没有问题，一些快捷的表单使用比3.x版本的方便。
我尝试用Hook+typescript的方式写

import React, { useEffect, useState } from 'react';
import { Input, Form, Button } from 'antd';
import { ColumnProps } from 'antd/es/table';interface iformProps {/** 回调函数，传回form表单填写的text数据 */onSubmit: (value: string) => void;
}export default function FormFC(props: iformProps): JSX.Element {return (<><Formname="basic"/** 默认初始数据全部在Form里注入了，不用包装函数 */initialValues={{ text: '初始数据' }}/** 提交校验也不在button的onClick里，onFinish是成功的回调，onFinishFailed是失败的回调，注意Button要写在Form里，并且htmlType="submit" */onFinish={(value) => console.log(value)}onFinishFailed={(value) => console.log(value)}/** 不用提交，每一次数据变化都把值返回上层组件 */onFieldsChange={(changedFields, allFields) => console.log('onFieldsChange', changedFields, allFields)}onValuesChange={(changedFields, allFields) => console.log('onValuesChange', changedFields, allFields)}style={{ display: 'flex' }}><Form.Item/** 以前写在包装函数里的东西全部作为formItem的属性了 */label="要做的事情"name="text"rules={[{ required: true, message: '今天你要做的事还没写' }]}style={{ flex: 1, paddingRight: '10px' }}><Input /></Form.Item>{/* <Button htmlType="submit">提交</Button> */}</Form></>);
}

但是这样使用有几个问题：
1、如果button不放在Form里面，怎么提交表单呢？（不过放在Form里，可以用FormItem包裹button进行布局）
目前我的研究是：如果button不放在Form里以及htmlType没有设置"submit"，就不能点击提交表单，调用封装在组件里的验证函数。（但是3.x版本注入到props里是可以调用的，这又是一点不同）
如果非得要放在外面，还要调用submit函数，那只能获取Form的实例来用了，相当于底下的useForm或者ref获取。这样还不如直接用底下的方法二、方法三这样。

2、如果想要重置表单呢？
回答同上，只能调用form的实例来用。

3、如果作为一个类似于卡片的组件，不需要提交（不需要按钮），只需要把数据反馈给上层组件，有没有办法呢？
就使用上面例子中的onFieldsChange和 onValuesChange，普遍来说还是用onValuesChange吧，但是onValuesChange不携带表单是否错误的消息，只是单纯的表单域值返回。

但是我使用的时候发现一个情况，每一次onChange修改，调用1次onValuesChange函数，却调用了三次onFieldsChange函数。

antd文档解释如下：

2、Form.useForm()

官方推荐使用 Form.useForm 创建表单数据域进行控制。如果是在 class component 下，应该通过 ref 获取数据域。

hook的使用方法，会自动创建一个form实例。
const [form] = Form.useForm();
把form打印出来看到是一个object,打印出来如下：和官方给的一模一样

form实例拥有的API如下，几乎就是form.create()创建出来的实例一样

官方案例在这里：

useForm就普通用法就好，把它当成v3.x里的props.form就行，里面的函数会有一点不同，但只是在方法一的基础上改了一点点，看懂了方法一，使用useForm就会习惯了。

如果方便button还是放在< Form>里会方便一点，设置htmlType=‘submit’，之后Form记得设置onFinish就可以了。

如果button不放在表单里，就设置一下onClick，调用form.submit()或者form.validateFields()都可以，使用例子在下面。

消化之后的练习Demo心得：

import React, { useEffect, useState } from 'react';
import { Input, Form, Button } from 'antd';export default function FormFC<T>(props: T): JSX.Element {/** 实例化Form */const [form] = Form.useForm();/** 表单里的onFinish */const onFinish = <T extends {}>(values: T): void => {console.log(values);};/** 表单里的onFinishFailed */const onFinishFailed = <T extends {}>(err: T): void => {console.log(err);};/** 点击提交按钮的submit，尝试不要把submit写在Form表单里的用法 */const onSubmit = (): void => {/** 调用这个提交，会自动调用onFinsh和onFinishFailed */// form.submit();/** 尝试使用validate，v3.x版本的都知道我为啥要调这个函数的。。。用习惯了* 但是v4.0这个函数返回的是一个promise,而且参数类型是NamePath(看官网，fieldNames 数组属性，用来自定义哪些字段需要校验收集)* 以下写法参照官方给出的教程。*/form.validateFields().then((values) => {/** 正确后的验证信息 */console.log(values);}).catch((errorInfo) => {/** 错误信息 */console.log(errorInfo);});};/*** 非箭头函数使用泛型* function test<T>(value: T): T{*   return value* }*/const onReset = () => {form.resetFields();};const onFill = () => {form.setFieldsValue({text: '哈哈哈哈哈',});};return (<><Form form={form} name="formFC" initialValues={{ text: '初始数据' }} onFinish={onFinish} onFinishFailed={onFinishFailed}><Form.Item name="text" label="要做的事" rules={[{ required: true }]}><Input /></Form.Item></Form>{/* 如果要用e，则onClick={(e: React.MouseEvent)=>onSubmit()} */}<Button onClick={onSubmit}>提交</Button><Button onClick={onReset}>重置</Button><Button onClick={onFill}>设置表单值</Button></>);
}

3、在Component里使用

几乎和上面没啥区别吧。懒得再多写一个了。看官方例子就好。

------------------------------------------

思考一个问题：如果一个页面有两个表单呢，基本上还是会遇到这样的情况的，一个页面多个表单

测试一下v4.0有没有更好的校验办法，v3.0这个问题可真是有点头疼。
就用上面的例子，再多加一个表单。

按钮在Form组件外的时候，点击提交onSubmit，输出的form实例包含了整个页面的表单数据。

把button挪到表单里面，效果同样，输出了整个页面的表单数据。

看来这点还是和3.0版本略像啊。。。一直没搞懂Form的name属性是拿来干嘛的。
提供几点解决办法：
1、把两个表单放在两个函数组件里，然后创建form实例，单独校验，就没事了。

2、比如某个表单显示，某个表单隐藏的情况，肯定有一个visible字段判断是那个表单在用是吧，那就把FormItem的校验规则rule里面的required选项设置成动态的。比如required:visible。

3、使用校验validate函数里传入namePath，判断校验哪个字段，对于字段不多的表单还是挺好用的。

4、听说可以用ref来创建一个组件里的不同form实例。（实验后表示不行，一个组件里也许只能有一个实例。

——————————————————

知道name 有啥用了。在Form.Provider里可以根据name判断当前提交表单。
Form.Provider：提供表单间联动功能，其下设置 name 的 Form 更新时，会自动触发对应事件。

怎么在Form.Provider里对单独的某一个表单提交？
试了试。。。。感觉弄不好就卡死了啊，还不知道为啥卡死了。
感觉不咋好用啊这个Provider。如果需要多表单校验，我估计可以搞一个useContext传form实例过去，这样大家都在一个实例里了，具体的如果遇到类似问题再说吧。

antd4使用form表单相关推荐

antd vue form表单子组件调用父组件的方法没反应_前几天推了Vue，今天给React疯狂打call...
在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数.但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难任何库都要在「概念简洁」(自由度高)和「使用便 ...
Antd4之form表单数据回显
文章目录一.函数中设置数据回显,使用useForm (1)使用useForm (2)在form表单中定义form 二.不使用useForm antd4摒弃了antd3的 getFieldDecora ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
form表单提交编码的问题
浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urle ...
js异步提交form表单的解决方案
1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span sty ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单的reset
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值.): 1.使用reset按钮,条件reset按钮必须在form表单内部. 2. <input id="But ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
一个接口同时支持 form 表单、form-data、json 的优雅写法
欢迎关注方志朋的博客,回复"666"获面试宝典来源:https://juejin.cn/post/7054441239839506446 最近重写个项目遇到个比较棘手的问题,老项 ...

antd4使用form表单

1、最普通的用法

2、Form.useForm()

3、在Component里使用

------------------------------------------

------------------------------------------

——————————————————

antd4使用form表单相关推荐

最新文章

热门文章