rc-form是什么：
在使用Ant Design Mobile的InputItem文本输入时提示"受控组件建议使用rc-form"，那么这个rc-from究竟是什么呢？
答：rc-form是一个将输入框变为受控组件的库，也是一个React的高阶form组件。它集合了对于输入框的各种方法，可以使我们方便的控制输入框的状态。
使用方法：
import { createForm } from 'rc-form';
.....
export default createForm()(CountSet);
首先安装并导入rc-form库引入createForm方法，然后使用createForm()在组件'CountSet'上挂载form对象，即在当前组件的props上挂在了form，通过使用props.form.相关方法，即可调用rc-form中定义的方法。
API:
validateFields([fieldNames: string[]],[options: object],callback(errors, values)) => void 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件。
getFieldsValue( [fieldNames: string[]] ) 获取一组控件的值，若 fieldNames 参数为空，则获取全部组件。
getFieldsError( [names: string[]] ) 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error。
getFieldProps( name,options ) 用于为控件绑定名称(key)，及控件的一些默认配置。其中options参数简单说两个 initialValue和 rules，initialValue是控件的默认初始值绑定在name上；rules是对输入框的内容做一些限制，比如是否必须输入(require)，最大(max)最小(min)长度等,也可以自定义限制(validator：function(rule, value, callback))。
一个例子：
import React, { useEffect ,useContext, useState} from 'react';
import {Icon,List,InputItem,Button,Toast} from 'antd-mobile';
import { createForm } from 'rc-form';
const CountSet = (props)=>{
const { getFieldProps, getFieldError } = props.form;
const [password,setPassword] = useState('');
const onSubmit = ()=>{
props.form.validateFields({ force: true }, (error) => {
if (!error) {
console.log(props.form.getFieldsValue());
} else {
console.log('Validation failed');
}
});
}
const validatePassword = (rule, value, callback) => {
if (value && value.length >=8) {
setPassword(value);
callback();
} else if(value.length===0){
callback(new Error('请输入密码'));
} else {
callback(new Error('请输入至少8位密码'));
}
}
const validateRePassword = (rule, value, callback) => {
if (value && value===password) {
callback();
} else if(value.length===0){
callback(new Error('请再次输入密码'));
} else {
callback(new Error('两次输入密码不一致'));
}
}
const validateTel = (rule, value, callback) => {
if (value && value.length===13) {
callback();
} else if(value.length===0){
callback(new Error('请输入电话号码'));
} else {
callback(new Error('电话号码不合法'));
}
}
const validateEmail = (rule,value,callback) => {
let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
if(reg.test(value)){
callback();
}else if(value.length===0){
callback(new Error('请输入邮箱'));
} else {
callback(new Error('邮箱不合法'));
}
}
return(
<form className='count-setting'>
<List>
<InputItem
{...getFieldProps('password', {
rules: [
{ validator: validatePassword },
],
})}
error={!!getFieldError('password')}
onErrorClick={() => {
Toast.info(getFieldError('password'), 1);
}}
clear
type="password"
placeholder="请输入"
>
<span>用户密码</span>
</InputItem>
<InputItem
{...getFieldProps('repassword', {
rules: [
{ validator: validateRePassword },
],
})}
error={!!getFieldError('repassword')}
onErrorClick={() => {
Toast.info(getFieldError('repassword'), 1);
}}
clear
type="password"
placeholder="请输入"
>
<span>重复密码</span>
</InputItem>
<InputItem
{...getFieldProps('tel', {
rules: [
{ validator: validateTel},
],
})}
error={!!getFieldError('tel')}
onErrorClick={() => {
Toast.info(getFieldError('tel'), 1);
}}
clear
type="phone"
placeholder="请输入"
>
<span>电话号码</span>
</InputItem>
<InputItem
{...getFieldProps('email', {
rules: [
{ validator:validateEmail},
],
})}
error={!!getFieldError('email')}
onErrorClick={() => {
Toast.info(getFieldError('email'), 1);
}}
clear
placeholder="请输入"
>
<span>电子邮箱</span>
</InputItem>
<List.Item>
<Button type='primary' onClick={onSubmit}>确认
</Button>
</List.Item>
</List>
</form>
)
}
export default createForm()(CountSet);
