Attributes commonly used in the react antd library form form

一,前言
1.form表单用于进行数据的收集,校验,提交等功能。

二,组件和属性介绍
1.<Form><Form/>

2.<Form.Item><Form.Item/>

(1)lable: 表单元素前的lable

(2)colon:是否显示lable后面的冒号

三, Form.create()()
1.使用from.create()(Demo)高阶组件,会自动给组件包装form属性。

四,from属性
1.getFieldDecorator(keys,option)(表单元素) 函数

(1)用于将某个属性值key交由form接管,

(2)option是一个对象,
rules:[]用于配置校验。
getValueFromEvent用于在用value给key赋值时可以做一层处理。
initialValue用于为元素附上初始值。没有的话初始值就是undefined。
valuePropName:子节点的值的属性,Switch的为checked

(3)当表单元素被form接管后,我们不应该在用onChange来修改value。但仍可以监听onChange来做一些操作。

2.getFieldValue和getFieldsValue

(1)用于获取某个或某组表单元素的值。getFieldsValue接受一个数组,元素为要获取的表单元素的key,如果不传则获取全部值。

3.setFieldsValue

(1)设置某个表单属性的值。

(2)被form接管的元素,可以使用setFieldsValue来动态修改表单组件的值。

4.resetFields

(1)重置表单元素的值

五,表单校验
1.必填校验:{required:true,message:'xxxx'}

2.正则校验:{pattern:/xxx/,message:'xxxx'}

3.最大长度校验:{max:'xxx',message:'xxxx'}

4.最小长度校验:{min:'xxx',message:'xxxx'}

5.url校验:{type:'url',message:'xxxx'}

6.自定义校验:validator

Guess you like

Origin blog.csdn.net/weixin_66709443/article/details/129446478