在使用 antd-mobile 的 InputItem 组件的时候需要引入受控组件 rc-form
npm install rc-form
rc-form 有几个常用的方法:
getFieldProps 这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。
getFieldDecorator 这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。
getFieldValue 用this.props.form.getFieldValue('变量名')的方式进行获取，注意：‘变量名’这个参数只能由getFieldDecorator所设定的。
getFieldProps 和 getFieldDecorator 在使用的时候方式区别
getFieldProps 的使用方式
<input {...getFieldProps('username', { onChange(){}, rules: [{required: true}], })}/>
getFieldDecorator 的使用方式(推荐使用)
getFieldDecorator('userName',{ initialValue:'', rules:[ { required:true, message:'用户名不能为空' }, { min:5,max:10, message:'长度不在范围内' }, { pattern:new RegExp('^\\w+$','g'), message:'用户名必须为字母或者数字' } ] })
( <Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />
)
注意两种使用方式的标签位置不一样。
