React.js中点击密码显示/隐藏图标时输入内容丢失的解决方法

问题根源：切换input的type属性时，React会重新创建该DOM节点，导致已输入的密码内容被重置。

解决方案一：添加固定key属性（推荐） #

给input元素添加一个稳定的key，让React识别这是同一个元素，避免重新创建DOM节点，从而保留输入内容：

const Login = () => {
  const [isRevealPassword, setIsRevealPassword] = useState(false);
  const togglePassword = () => {
    setIsRevealPassword((prevState) => !prevState);
  };

  return (
    // ...其余组件内容
    <input
      key="password-input" // 添加固定key
      placeholder='Old Password'
      className='form-control update_password_form'
      type={isRevealPassword ? 'text' : 'password'}
      {...register('password', { required: true })}
    />
    <span onClick={togglePassword} role="presentation" className="password_reveal">
      {isRevealPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
    </span>
    // ...其余组件内容
  );
};

解决方案二：手动绑定输入框值 #

通过react-hook-form的watch和setValue手动同步输入框值，确保切换type时内容不丢失：

const Login = () => {
  const [isRevealPassword, setIsRevealPassword] = useState(false);
  const { register, watch, setValue } = useForm();
  const passwordValue = watch('password');

  const togglePassword = () => {
    setIsRevealPassword((prevState) => !prevState);
    setValue('password', passwordValue);
  };

  return (
    // ...其余组件内容
    <input
      placeholder='Old Password'
      className='form-control update_password_form'
      type={isRevealPassword ? 'text' : 'password'}
      {...register('password', { required: true })}
      value={passwordValue}
    />
    <span onClick={togglePassword} role="presentation" className="password_reveal">
      {isRevealPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
    </span>
    // ...其余组件内容
  );
};

两种方案中，添加key的方式更简洁高效，是首选方案。

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