dva中使用antd Form经验总结

创建

引入form后先初始化form

import { Form } from 'antd';
@Form.create()
export default class ...
render() {
	return (
		

		
	)
}

之后可以在this.props.form中访问到form对象

this.props.form.FOO

在form中使用的任何表单项都需要包裹在Form.Item中，使用一个高阶组件函数getFieldDecorator对原始输入组件进行包装，为其附加表单验证规则和装饰外观。完整用例如下：

render() {
	const FormItem = Form.Item;		// 懒得写点
	const formItemLayout = {		// FormItem的布局属性
		wrapperCol: {span: 15},		// 表单填写域的宽度，最大24
		labelCol: {span: 6}			// 表单标签域的宽度，最大24
	}
	// 高阶组件，用于为原始Input等组件封装自定义表单项的验证规则和装饰信息（如提示文本、是否必填等）
	const {getFieldDecorator} = this.props.form;
	return (
		

					// label为标题
				{
					// 'userId'为表单项的key，作为将来提交给服务器时的字段名称
					getFieldDecorator('userId', {
						initialValue: this.props.userId || '',	//  初始值
						rules: [{		
									required: true, // 是否必填
									message: '请输入长度为5的账号名！',	 // 验证失败后的提示
									len: 5		// 规定长度
								}],
						validateTrigger: 'onBlur'		// 何时进行验证，这里为失焦时验证
					})()	 //  placeholder直接写原始组件里，不要和initialValue同时使用
				}
			
		
	)
}

表单验证

在上面代码中，我们进行了简单的表单验证如下：

// 'userId'为表单项的key，作为将来提交给服务器时的字段名称
					getFieldDecorator('userId', {
						initialValue: this.props.userId || '',	//  初始值
						rules: [{
									// antd内建校验类型
									// type: 'email'		
									required: true, // 是否必填
									message: '请输入长度为5的账号名！',	 // 验证失败后的提示
									len: 5		// 规定长度
								}],
						validateTrigger: 'onBlur'		// 何时进行验证，这里为失焦时验证
					})()	 //  placeholder直接写原始组件里，不要和initialValue同时使用

antd封装了很多常用的表单验证方法，可以直接写在配置项的rules里面。
type: 'email’表示该字段的内建校验类型为email。
len: 5 表示字段长度必须为5。

type完整可选项请参见：https://github.com/yiminghe/async-validator#type

自定义表单验证

在配置项中写validator函数：

getFieldDecorator('userId', {
					rules: [{
							}],
					validateTrigger: 'onBlur'
					validator: (rule, value, callback) => {
									const { getFieldValue } = this.props.form
        							if (value && value !== getFieldValue('newPassword')) {
            							callback('两次输入不一致！')
       								 } else { callback() }
								}
					})()	

其中value为该项的值。callback()中参数为空则为验证通过，否则为失败，提示信息为所填参数。
获取表单某项的值：this.props.form.getFieldValue(‘fieldName’)

表单提交

表单提交一般需要写一个提交按钮，它的htmlType为submit，必须写在表单内：

	
	提交
	

在Form生成时，我们给它绑定了onSubmit事件。其实也可以通过bind传参数:

比如传的是 { index }，那么之后在handleSubmit中，找params.index就可以了。
在提交的时候需要统一进行一次表单验证。因为每个表单项的验证规则我们已经定义过了，这里直接使用antd内置的validateFields方法即可:

handleSubmit(e, params) {
	let { index } = params;
	const { form } = this.props;
	form.validateFields((err, values) => {
		if (!err) {
			console.log(values)		// values即为表单键值对，可以直接异步请求
			e.preventDefault();
		} else {
			e.preventDefault();
		}
	})
}

常用表单组件

Input

文本输入框

import {Input} from 'antd';
...

可选属性：

1. disabled：是否禁用状态，默认为 false
2. placeholder：占位符
3. addonAfter：带标签的 input，设置后置标签
4. addonBefore：带标签的 input，设置前置标签
5. defaultValue：输入框默认内容
6. onChange：输入框内容变化时的回调

TextArea：富文本框

使用：

额外属性：
autosize：自适应内容高度，可设置为 true|false
或对象：{ minRows: 2, maxRows: 6 }

更多详见：https://ant.design/components/input-cn/

Button

上文提到表单提交需要写一个提交按钮，它的htmlType为submit，必须写在表单内：

	
	提交
	

另外，类似地，还可以写一个重置按钮，通过form的resetFields方法来重置：

	{this.props.form.resetFields()}}
	>
	重置
	

可选属性：

1. disabled： 按钮失效状态
2. htmlType：设置 button 原生的 type 值。
3. type：设置按钮类型，可选值为 primary dashed danger link
4. onClick：点击按钮时的回调

更多详见：https://ant.design/components/button-cn/

Select

Select选择器组成为：Select包裹若干个Option选项。

import { Select } from 'antd';
const { Option } = Select;
...
render() {
	return(
		
			Jack
			Lucy
			
        		Disabled
     		
		
	)
}

更多详见：https://ant.design/components/select-cn/

TreeSelect

树选择器与选择器类似，只是结构稍有复杂。
最简单的hard code 版本如下：

        
          
            
            
          
          
            sss} key="random3" />
          
        
      

但建议使用JSON数据录入更为整洁。
结构体格式如下：

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];

使用时只需一句话：

常用选项：

1. dropdownStyle：下拉菜单的样式。
2. treeData：treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点。
3. treeDefaultExpandAll：默认展开所有树节点。
4. treeDefaultExpandedKeys：默认展开的树节点。

更多详见：https://ant.design/components/tree-select-cn/

Cascader

级联选择器，一般用于选择所在地时使用的省市区三级联动。

选项用options属性传进去，实例：

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

完整的全国地区表自行搜索。

更多详见：https://ant.design/components/cascader-cn/

DatePicker和RangePicker

日期选择框和日期范围选择框。

// 这是DatePicker



// 这是两个DatePicker组成的范围选择框

更多详见：https://ant.design/components/date-picker-cn/

Radio

单选框。

        A
        B
        C
        D
      

更多详见：https://ant.design/components/radio-cn/