我正在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

Second rerender after submitting with empty inputs

What should it look like

推荐答案

之所以会出现这个问题,是因为您在集中输入时清除了错误.

聚焦错误字段是react-hook-form库的默认行为,您可以阅读HERE.

您可以在代码中添加shouldFocusError: false,以防止字段在出现错误时获得焦点.

下面是一个例子:

const {
        register, handleSubmit, clearErrors, setError, reset, formState: {
            errors
        },
    } = useForm({
        shouldFocusError: false // ADD THIS HERE
        mode: "onBlur", defaultValues: {
            login: "", password: "", rememberMe: false, captcha: "",
        }
    })

Reactjs相关问答推荐

CreateBrowserRouter将props 传递给父组件以验证权限

下拉Tailwind CSS菜单与怪异beviour

一键MUI导出

如何通过回调函数获取多个值?

每次单击按钮时,Reaction组件都会重新生成

无法将react 路由状态从路由传递给子组件

当列表中的项的顺序改变并且使用唯一键作为它们的索引时,Reaction如何看待呈现方面?

svg每条路径上的波浪动画

从 MongoDB createAt 字段中分割精确时间

验证 Yup 中的对象项

使用D3.js绘制和展示弦图的右下方象限

无法从子组件传递数据到父组件

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用?

Redux Toolkit 配置,是否适用于全栈应用程序?

Reactjs 表单未反映提交时的更改

如何在react 中更新子组件中的变量?

使用输入类型文本对 useState 和日期做出react

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

如何将 id 从页面传递到另一个页面?

我想将悬停 colored颜色 更改为红色.写了一个话题,这个元素没有react ,怎么解决呢?