我正在制作一個帶有 react-hook-form 和 yup 作為驗證器的簡單反應表單。如果用戶的輸入被成功驗證，我想向用戶顯示一些反饋，比如綠色輪廓。問題是我只想在驗證輸入時顯示綠色輪廓，而不是每次渲染組件時。我怎樣才能做到這一點？零件：
const schema = yup.object().shape({
email: yup
.string()
.required("This field is required"),
password: yup.string().required("This field is required"),
});
export const Form = () => {
const {
register,
handleSubmit,
getValues,
formState: { errors },
} = useForm({
mode: "onBlur",
resolver: yupResolver(schema),
});
return (
<form noValidate onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="email">Email</label>
<input
id="email"
{...register("email")}
/>
{errors.email ? errors?.email.message : null}
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
{...register("password")}
/>
{errors.password ? errors?.password.message : null}
<button
type="submit"
>
Submit
</button>
</form>
);
};
uj5u.com熱心網友回復：
您可以使用所觸動的屬性來實作您想要的。在這種情況下使用touched 屬性是很常見的。以下是您可以執行的操作：
從useForm鉤子中，您還可以提取touchedFields
const {
register,
handleSubmit,
getValues,
formState: { errors, touchedFields }
} = useForm({
mode: "onBlur",
resolver: yupResolver(schema)
});
touchFields 屬性存盤了觸摸的欄位。當用戶第一次離開該欄位的焦點時，該欄位被觸摸。因此，您可以有條件地顯示有關欄位的訊息，如果它被觸摸并且它沒有這樣的錯誤：
{touchedFields.email && !errors.email ? <div>Email ok</div> : null}
你可以試試這個沙盒。我希望你能從中得到靈感。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/425181.html
標籤：javascript css 反应 形式 验证