使用useForm时输入值返回undefined的问题排查及表单验证需求

问题描述 #

希望在表单提交前用React Hook Form做验证，但点击提交按钮后，控制台输出的表单数据全为undefined：

{mailOrNumber: undefined, password: undefined}

相关代码片段：

const {
    register, handleSubmit, setError, formState: { errors, isValid }
} = useForm<loginFor>()

const onSubmit: SubmitHandler<loginFor> = data => console.log(data);

表单JSX结构：

return (
    <div className="popup-login">
        <div className="popup-login__cover-close-btn">
            <MyButton
                className="popup-login__close"
                type="button"
                onClick={changeStateForPopupClose}
            ></MyButton>
        </div>
        <div className="popup-login__main-cover">
            <form onSubmit={handleSubmit(onSubmit)}>
                <div className="popup-login__cover-block">
                    <h2 className="popup-payment__title">
                        {
                            enterOrRegister === 'вход' ? "Вход в учетную запись" :
                                "Регистрация"
                        }
                    </h2>
                    <div className="popup-login__enter">
                        <MyInput
                            type="text"
                            className={inputClass.join(' ')}
                            placeholder="email или номер телефона"
                            {...register("mailOrNumber")}
                        />
                        <div className="popup-login__for-btn-show-hide">
                            <MyInput
                                type={!stateShowPassword ? "password" : "text"}
                                className={mailEnter.password.length ? "popup-login__input popup-login__input_password hidden" : "popup-login__input popup-login__input_password" }
                                placeholder =  "password"
                                {...register("password")}
                            />
                            {
                                mailEnter.password.length != 0 &&
                                <div
                                    className="popup-login__for-btn-show-hide_btn"
                                    onClick={showPassword}
                                >
                                    {!stateShowPassword ? "SHOW" : "HIDE"}
                                </div>
                            }
                        </div>
                        {
                            enterOrRegister === 'вход' && <MyCheckbox />
                        }
                    </div>
                    {enterOrRegister === 'вход' &&
                        <div className="popup-login__additional">
                            <h2 className="popup-login__titile-register">Нет аккаунта?
                            </h2>
                            <MyButton
                                className="popup-login__register"
                                type="button"
                                onClick={changeFormRegister}
                            >
                                зарегистрироваться
                            </MyButton>
                        </div>
                    }
                </div>
                <div className="popup-login__cover-btns">
                    <MyButton
                        className="popup-login__btn"
                        type="submit"
                    // onClick = {clickedOnEnter}
                    >
                        {
                            enterOrRegister === 'вход' ? "Войти" : "Зарегистрироваться"
                        }
                    </MyButton>
                </div>
            </form>
        </div>
    </div>
);
};

解决方案 #

核心原因 #

自定义MyInput组件没有将register返回的属性（如name、onChange、onBlur）传递给内部的原生<input>元素。React Hook Form依赖这些属性跟踪表单输入值，不传递的话无法捕获用户输入，导致提交时数据为undefined。

修复MyInput组件 #

修改MyInput，确保把所有接收的props（包括register生成的）传递给原生input：

const MyInput = ({ className, type, placeholder, ...rest }) => {
  return (
    <input
      type={type}
      className={className}
      placeholder={placeholder}
      {...rest} // 必须传递register生成的props
    />
  );
};

额外检查项 #

• 确认loginFor类型定义正确，包含mailOrNumber和password字段，避免类型错误引发异常。
• 检查mailEnter这类自定义状态是否干扰了表单值的捕获，如果是手动控制input值的场景，需改用React Hook Form的Controller组件或setValue方法同步数据。

内容的提问来源于stack exchange，提问作者Максим Дмитриевич