如何使用react hook表单验证在react的文本字段的变化

Question

我要验证的表单

我看到验证这些表单在react hook表单与多组件文本字段。问题是它在提交时验证表单，但我需要在更改文本字段

时验证它

const eventSchema = yup.object().shape({
title: yup
.string()
.max(128, requiredLimit)
.required(requiredField)
.nullable(),
});

const useFunction = useForm({
defaultValues: defaultValue,
resolver: yupResolver(eventSchema),
});
const { handleSubmit, reset, control, register, formState } = useFunction;
const { errors } = formState;
useEffect(() => {
reset(defaultValue);
}, [
defaultValue.title,
]);

<FormInputText
name='title'
type='text'
control={control}
label='Title'
helperText={errors?.title?.message}
errors={!!errors.title}
register={register('title', {
onChange: (e) => dispatch(setTitle(e.target.value)),
})}
/>

Answer 1

可以添加模式prop

https://react-hook-form.com/api/useform/

mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'

const useFunction = useForm({
mode: 'onBlur', // new prop added
defaultValues: defaultValue,
resolver: yupResolver(eventSchema),
});