Ant Design 组件 —— Form表单（二）

Ant Design of React @3.10.9

拉取项目 luwei.web.study-ant-design-pro, 切换至 add 分支，可看到 Form 表单实现效果

实现一个新增表单

思路

1. Create表单：@Form.create()
2. 表单数据绑定 getFieldDecorator
3. 渲染查询表单的查询条件 render <Form.Item>
4. 定义表单校验条件 rules
5. 设置一组输入控件的值 setFieldsValue
6. 获取查询条件的值 validateFields

区别于Form表单(一)，新增了 表单校验条件 和 设置控件值 两点。

代码

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. 定义表单校验条件 rules

<Form.Item {...formItemLayout} label="名称">
	{getFieldDecorator('name', {
		rules: [
		  {
			  required: true,
			  message: '必填',
		  },
		],
		initialValue: this.state.name,
})(<Input placeholder="请输入名称" maxLength={25} />)}
复制代码

校验规则请参考Ant Design - Form 校验规则

5. 设置一组输入控件的值 setFieldsValue

this.props.form.setFieldsValue({
  name: `hello world`,
});
复制代码

使用场景：

1. 新增信息，将每一个字段置空
2. 更新信息，将原有的数据设置在相对的表单控件中。

setFieldsValue

动态设置/控制表单中控件的值

注意

1. 使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。
2. 设置一组输入控件的值（注意：不要在 componentWillReceiveProps 内使用，不然会致使死循环

6. 获取查询条件的值 validateFields

form.validateFields / validateFieldsAndScroll

校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验所有组件

const { form } = this.props;

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

深刻了解

• Ant Design Form表单

• rc-form

• antd源码解读（9）- Form

• 做者简介：李尧晖，芦苇科技web前端开发工程师，表明做品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

  欢迎和咱们一块儿并肩做战： web@talkmoney.cn 访问 www.talkmoney.cn 了解更多