一,前言
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
react antd库form表单中常用的 属性
おすすめ
転載: blog.csdn.net/weixin_66709443/article/details/129446478
おすすめ
ランキング