antd 中 rc-form 的用法

在使用 antd-mobile 的 InputItem 组件的时候需要引入受控组件 rc-form

npm install rc-form

rc-form 有几个常用的方法: 

getFieldProps        这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。

getFieldDecorator        这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。

getFieldValue        用this.props.form.getFieldValue('变量名')的方式进行获取，注意：‘变量名’这个参数只能由getFieldDecorator所设定的。

getFieldProps 和 getFieldDecorator 在使用的时候方式区别

getFieldProps 的使用方式

 

getFieldDecorator 的使用方式(推荐使用)

getFieldDecorator('userName',{ initialValue:'', rules:[ { required:true, message:'用户名不能为空' }, { min:5,max:10, message:'长度不在范围内' }, { pattern:new RegExp('^\\w+$','g'), message:'用户名必须为字母或者数字' } ] })

( } placeholder="请输入用户名" />

)

注意两种使用方式的标签位置不一样。