最近做表单校验时遇到一个警告
`callback` is deprecated. Please return a promise instead.
原因 :
新版的antd使用了React的hooks,表单中的字段效验方法进行了一些修改。原来的回调方法改成返回一个Promise对象
原来的写法
const NameValidator = (rule, value, callback) => {
if (value) {
const nameLength = getTextLength(value)
if (nameLength >= 4 && nameLength <= 30) {
callback()
} else {
callback('名称长度为4-30个字符,一个中文字等于2个字符')
}
} else {
callback()
}
};
最新用法
const NameValidator = (rule, value, callback) => {
if (value) {
const nameLength = getTextLength(value)
if (nameLength >= 4 && nameLength <= 30) {
return Promise.resolve()
} else {
return Promise.reject('名称长度为4-30个字符,一个中文字等于2个字符')
}
} else {
return Promise.resolve()
}
};
调用
<FormItem label="新名称:"
name="nickname"
initialValue={undefined}
style={{width: '90%'}}
rules={[
{
required: true,
message: '请填写新名称'
}, {
validator: NameValidator,
}
]}
>
<Input/>
</FormItem>