如何解决提交后,react-hook-form 无法正确验证值和 onChange
我有组件:
const FormComponent = () => {
const { register,handleSubmit,errors } = useForm();
const [val,setVal] = useState("");
const handleSubmitForm = () => console.log("send!");
const handleChange = (e) => {
setVal(e.target.value);
};
return (
<form onSubmit={handleSubmit(handleSubmitForm)}>
<input
type="text"
name="test"
value={val}
ref={register({ required: "The field is required." })}
onChange={handleChange}
/>
{errors.test && errors.test.message}
<button type="submit">Send</button>
</form>
);
};
当我单击“提交”时,react-hook-form
显示错误消息:“该字段是必填字段。
'。当我想写单词“TEST”然后我尝试删除此文本时,例如选择所有文本并单击 Backspace 按钮,然后我无法从输入中删除此文本,但显示有关空值的消息。
如何将 react-hook-form
与 value
和 onChange
事件一起使用?
解决方法
不需要有 value 和 onChange。您可以使用不受控制的形式,如果您需要其中一个输入的值,您可以简单地观看它;-)
const FormComponent = () => {
const { register,handleSubmit,watch,errors } = useForm();
const handleSubmitForm = (data) => console.log(data);
const valueOfTest = watch('test');
useEffect(() => {
//consider this to be onchange function
doSomething(valueOfTest);
},[valueOfTest]);
return (
<form onSubmit={handleSubmit(handleSubmitForm)}>
<input
type="text"
name="test"
ref={register({ required: "The field is required." })}
/>
{errors.test && errors.test.message}
<button type="submit">Send</button>
</form>
);
};
,
调用 useForm 时必须使用 mode:"onChange"
代码示例:
const { register,formState: { errors } } = useForm({
resolver: yupResolver(schema),mode: "onBlur",// mode:"onChange",});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。