我正在尝试使用我的express-app验证用户名和电子邮件,但是在asyncValidate方法上,当我验证其中一个时,另一个错误状态消失了。
const asyncValidate = (values, dispatch, props, field) => {
if (field === 'username') {
const url = config.dev_api_url + `/validation/username/${values.username}`
return axios.get(url).then(res => {
if (res.data.username === true) {
throw { username: 'Already exists' }
}
})
} else if (field === 'email') {
const url = config.dev_api_url + `/validation/email/${values.email}`
return axios.get(url).then(res => {
if (res.data.email === true) {
throw { email: 'Already exists' }
}
})
}
}
这是我呈现输入错误的函数。
renderInput = form => {
let fieldClasses = 'field fluid'
let inputClasses = 'ui fluid input '
let messageType = ''
let messageContent = ''
let iconType = ''
if (form.meta.error && form.meta.touched) {
messageType = 'error'
messageContent = form.meta.error
fieldClasses += ' error'
inputClasses += ' icon'
iconType = 'error'
if (form.meta.error === 'password_error') {
messageContent = (
<em>
<b>1 Uppercase</b> letter <br />
<b>1 Lowercase</b> letter <br />
<b>1 Number</b> <br />
At least <b>8 characters</b> long <br />
</em>
)
}
} else if (form.meta.touched) {
inputClasses += ' icon'
iconType = 'success'
}
return (
<div className={fieldClasses}>
<label>{form.label}</label>
<div className={inputClasses}>
<input {...form.input} autoComplete="off" type={form.type} placeholder={form.placeholder} />
{this.renderIcon(iconType)}
</div>
{this.renderMessage(messageType, messageContent)}
</div>
)
}
当我抛出一个新错误时,另一个错误消失了。这是一些图片。
答案 0 :(得分:1)
我发现这样做的方法不太脏-万一有人需要使用redux-form:
class SingleItemAPIView(generics.ListAPIView):
serializer_class = ItemSerializer
def get_queryset(self):
item = self.kwargs['pk']
queryset = Item.objects.filter(pk=item)
return queryset
答案 1 :(得分:0)
这会很简短。
使用Redux-Form这样做很麻烦,所以我最好使用Formik,它更轻巧,并且可以处理必要的事情,除非您需要redux-form的某些功能,否则这就是方法。