Ant Design 组件 —— Form表单(一)

Ant Design 组件 —— Form表单(一)

思路

@Form.create()
getFieldDecorator
render <Form.Item>
validateFields

代码

1. Create表单: @Form.create()

Form.create()

这是一个高阶函数,传入的是react组件,返回一个新的react组件,在函数内部会对传入组件进行改造,添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步 《深入理解 React 高阶组件》 ,我们这里不做过多的深究。

Form.create() 包装过的组件会自带 this.props.form 属性

// 使用方式如下:
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
复制代码

代码中结合 @ 的修饰器,用 @Form.create() 进行创建。

2. 表单数据绑定 getFieldDecorator

getFieldDecorator(id, options)

用于和表单进行双向绑定

<!-- 表单数据绑定 -->
<Form.Item {...formItemLayout} label={'名称'}>
	{getFieldDecorator('searchName')(
		<Input placeholder={'请输入名称'} />
	)}
</Form.Item>
复制代码

3. 渲染查询表单的查询条件 render <Form.Item>

在定义表单字段的时候,渲染到页面中,与步骤2代码一致

更多FormItem属性请参考 Ant Design – Form – Form.Item

4. 获取查询条件的值 validateFields

form.validateFields / validateFieldsAndScroll

校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件

const { form } = this.props;

// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
  	if (err) return;
  	const { searchName = '' } = fieldsValue;
});
复制代码

原文 

https://juejin.im/post/5c01e96a51882526f96b498a

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Ant Design 组件 —— Form表单(一)

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址