我正在try 使用REACTION-HOOK-FORM在REACTION中创建一个登录表单,但当我try 使用空输入值提交时-在重新渲染后"PASSWORD"的错误被删除.并且根本不会显示"登录"错误.
如果我对所有其他注册名称(例如"captcha"或"login1/password1")执行相同的操作,则一切正常.
Sandbox :https://codesandbox.io/p/sandbox/8n5rmr?file=%2Fsrc%2FApp.js
以下是我的代码:
import React from "react";
import {useForm} from "react-hook-form";
const Login = (props) => {
const {
register, handleSubmit, clearErrors, setError, reset, formState: {
errors
},
} = useForm({
mode: "onBlur", defaultValues: {
login: "", password: "", rememberMe: false, captcha: "",
}
})
const onSubmit = async (data) => {
reset({
login: "", password: "", rememberMe: false, captcha: "",
}, {keepErrors: true});
}
console.log(errors);
console.log(props);
debugger
return (<form
onSubmit={handleSubmit(onSubmit)}
>
<input
{...register("login", {
required: "Login is required", minLength: {
value: 4, message: `Min length is ${4}`
}
})}
placeholder={"Login"}
onFocus={() => clearErrors(["login", "server"])}
/>
<p>{errors.login?.message}</p>
<input
{...register("password", {
required: "Password is required"
})}
placeholder={"Password"}
onFocus={() => clearErrors(["password", "server"])}
/>
<p>{errors.password?.message}</p>
<input
{...register("rememberMe",)}
type={"checkbox"}
/>
<br/>
<input
{...register("captcha", {
required: "Captcha is required"
})}
placeholder={"Captcha"}
onFocus={() => clearErrors(["captcha", "server"])}
/>
<p>{errors.captcha?.message}</p>
<input type={"submit"}/>
</form>)
}
First rerender after submitting with empty inputs个