文章目录
最基本使用
cnpm i rc-form -S
import React, { Component } from 'react'
import { InputItem } from 'antd-mobile'
import { createForm } from 'rc-form'
class Login extends Component {
/** 3.
* 自定义的验证方式
* @param {Object} rule 可以在里面获取到验证对象(getFieldProps 的第一个参数对应)
* @param {String} value 输入框当前值
* @param {Function} callback 触发失败的回调函数(返回错误信息)
*/
validatorAccount = (rule, value, callback) => {
callback(new Error('错误提示!'))
}
render() {
// 1. 这里需要使用两个方法:
// 方法一: getFieldProps : 设置验证方式
// 方法二: getFieldError : 错误处理
const { getFieldProps, getFieldError } = this.props.form;
return (
<div className="login">
<div className="body">
<div className="login-account">
<InputItem
name="account"
clear
// 2. 绑定验证方法(第一个参数理解为key值)
{
...getFieldProps('account', {
rules: [{ "validator": this.validatorAccount }]
})
}
// 3. icon 错误提示 (输入框后面添加一个小叉叉,表示该输入有问题)
error={!!getFieldError('account')}
// 4. 3产生的icon的回调函数(getFieldError返回验证方法中callback的提示信息)
onErrorClick={() => {
console.info(getFieldError('account'), 1);
}}
placeholder="手机号/邮箱/会员名"
>
</InputItem>
</div>
</div>
</div>
)
}
}
// 4. 还有一个比较重要的哦
export default createForm()(Login)