dva中使用antd Form经验总结

最新推荐文章于 2023-07-05 12:57:36 发布

原创

最新推荐文章于 2023-07-05 12:57:36 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#antd #dva #react #form #JavaScript

本文总结了在dva中使用antd Form的经验，包括创建表单、表单验证、自定义验证、表单提交等。详细介绍了如何使用getFieldDecorator进行表单项包装，利用antd内置验证方法validateFields进行表单验证，以及各种常用表单组件如Input、TextArea、Button、Select、TreeSelect、Cascader、DatePicker和RangePicker、Radio的使用方法和属性配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建

引入form后先初始化form

import { Form } from 'antd';
@Form.create()
export default class ...
render() {
	return (
		<Form
			 layout="horizontal"		// form的基本布局
			 onSubmit={this.handleSubmit.bind(this)} 		// form提交事件，需要自己写
			 style={
  
  {minWidth: '300px'}}		// 可以自定义form容器的样式
		>
		</Form>
	)
}

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

表单验证

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

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

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