如何阻止React-Hook-Form覆盖HTML输入框的type属性

问题根源 #

React Hook Form在注册输入框时会记录初始配置的type="password"，每次表单状态更新（比如用户输入触发onChange）时，会自动将DOM元素的type属性重置为注册时的初始值。你之前直接操作DOM refs修改type的方式脱离了React的状态管理，所以会被RHF的同步逻辑覆盖，无法持久生效。

解决方案：用受控状态管理密码可见性 #

不要直接操作DOM的type属性，而是通过React状态控制输入框的type，让RHF的渲染逻辑和你的状态同步，就能彻底解决覆盖问题。

方案1：配合register使用受控type #

自定义密码输入组件，用状态管理密码可见性，动态设置输入框的type：

import { useState } from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';

interface PasswordInputProps {
  register: UseFormRegisterReturn;
  className?: string;
}

export const PasswordInput = ({ register, className }: PasswordInputProps) => {
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  const toggleVisibility = () => {
    setIsPasswordVisible(prev => !prev);
  };

  return (
    <div className={`password-input-wrapper ${className}`}>
      <input
        {...register}
        type={isPasswordVisible ? 'text' : 'password'}
        placeholder="请输入密码"
      />
      <button
        type="button"
        onClick={toggleVisibility}
        aria-label={isPasswordVisible ? '隐藏密码' : '显示密码'}
        className="toggle-btn"
      >
        {isPasswordVisible ? '👁️‍🗨️' : '👁️'}
      </button>
    </div>
  );
};

在表单中使用组件：

import { useForm } from 'react-hook-form';
import { PasswordInput } from './PasswordInput';

export const LoginForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: { password: '' }
  });

  const onSubmit = (data: { password: string }) => {
    console.log('提交的密码:', data.password);
    // 处理提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="login-form">
      <PasswordInput register={register('password', { required: '密码不能为空' })} />
      {errors.password && <p className="error">{errors.password.message}</p>}
      <button type="submit" className="submit-btn">登录</button>
    </form>
  );
};

方案2：用Controller完全控制输入框 #

如果需要更精细的控制（比如自定义验证或复杂UI），可以用RHF的Controller组件接管输入框的props渲染：

import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';

export const LoginForm = () => {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: { password: '' }
  });
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  const toggleVisibility = () => {
    setIsPasswordVisible(prev => !prev);
  };

  const onSubmit = (data: { password: string }) => {
    console.log('提交的密码:', data.password);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="login-form">
      <Controller
        name="password"
        control={control}
        rules={{ required: '密码不能为空' }}
        render={({ field }) => (
          <div className="password-input-wrapper">
            <input
              {...field}
              type={isPasswordVisible ? 'text' : 'password'}
              placeholder="请输入密码"
            />
            <button
              type="button"
              onClick={toggleVisibility}
              aria-label={isPasswordVisible ? '隐藏密码' : '显示密码'}
            >
              {isPasswordVisible ? '👁️‍🗨️' : '👁️'}
            </button>
          </div>
        )}
      />
      {errors.password && <p className="error">{errors.password.message}</p>}
      <button type="submit">登录</button>
    </form>
  );
};

为何之前的方法无效？ #

你之前通过自定义handleOnChange手动调用RHF的onChange并切换密码可见性，本质还是在修改DOM的type。而RHF处理完onChange后，会重新同步注册时的初始props（包括type="password"）到DOM，所以你的修改会被覆盖。用React状态管理type后，每次渲染时输入框的type都会根据当前状态生成，和RHF的同步逻辑一致，就不会出现被覆盖的问题。

内容的提问来源于stack exchange，提问作者Hashira