我试图用 yup
显示错误和 react-hook-form
当用户选择 5 个以上的复选框没有成功时。
相反,选择第七个复选框时会显示错误。
这是简化的代码:
imports...
const schema = yup.object().shape({
option: yup.array().max(5)
});
function App() {
const { register, handleSubmit, errors } = useForm({
mode: "onBlur",
resolver: yupResolver(schema)
});
const [state, setState] = useState({
wasSubmitted: false
});
const submit = async (data) => {
window.alert(JSON.stringify(data));
};
if (state.wasSubmitted) {
return <p>Congrats</p>;
} else {
return (
<>
<CssBaseline />
<Container maxWidth="sm">
<Typography variant="h2" component="h1">
My form
</Typography>
<form noValidate autoComplete="off" onSubmit={handleSubmit(submit)}>
<FormControl
component="fieldset"
error={!!errors.option}
>
<FormLabel component="legend">
Please select the category or categories of books the child is
interested in:
</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option1"
label="Option 1"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option2"
label="Option 2"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
label="Option3"
value="Option 3"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option4"
label="Option 4"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option5"
label="Option 5"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option6"
label="Option 6"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option7"
label="Option 7"
/>
<FormControlLabel
control={<Checkbox name="option" inputRef={register} />}
value="Option8"
label="Option 8"
/>
<FormControlLabel
<FormHelperText>Up to five categories</FormHelperText>
</FormControl>
<Button
type="submit"
disableElevation
>
Submit
</Button>
</form>
</Container>
</>
);
}
}
export default App;
您还可以在此处找到项目的沙箱:有任何想法吗?
最佳答案
正如@aadlc 所说,解决方案是将模式设置为 onChange
或 all
.我会解释原因。
来自 react-hook-form API docs :mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'
姓名
类型
描述
onSubmit(默认)
字符串
验证将在 submit
上触发事件和无效输入将附加 onChange
事件监听器重新验证它们。
模糊
字符串
验证将在 blur
上触发事件。
onChange
字符串
验证将在 change
上触发事件与每个输入,并导致多次重新渲染。警告:这通常会对性能产生重大影响。
触摸
字符串
验证将在第一个 blur
上触发事件。之后,它将在每个 change
上触发。事件。
全部
字符串
验证将在 blur
上触发和 change
事件。
在您的代码中,表单模式为 onBlur
.这意味着验证是在 blur
上触发的事件(使输入失去焦点)。当您选择选项 n+1
时,它从选项 n
触发模糊事件.
例如就在您选择第 6 个选项(无效)之前,blur
事件从第 5 个选项(有效)触发,因为您不再关注它,并从选项 1-5 进行验证,因此您必须检查第 7 个选项以重新验证从 1 到 6 的选项。
-- select up to 5 options --
select option 4
blur event fires from option 4 -> validate -> pass
select option 5
blur event fires from option 5 -> validate -> pass
select option 6
blur event fires from option 6 -> validate -> fail
select option 7
将验证模式更改为 onChange
将在 change
之后验证当所有值都是最新的时,将触发事件:-- select up to 5 options --
select option 4
blur event fires from option 4
select option 5
change event fires from option 5 -> validate -> pass
blur event fires from option 5
select option 6
change event fires from option 6 -> validate -> fail
blur event fires from option 6
select option 7
change event fires from option 7 -> validate -> fail
将验证模式更改为 all
将在 blur
中验证两者和 change
事件,这在这个工作流程中可能有点矫枉过正,但它也有效。
关于reactjs - react-hook-form:使用 onBlur 模式时验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66758855/