React-Hook-Form输入值浏览器可见但审查元素为空、CSS样式不生效问题

DevOps 小满

2026-9-24

技术原理说明

你遇到的现象是HTML Attribute和DOM Property的差异导致的，和react-hook-form（你提到的react-form-hook为名称笔误）的底层设计逻辑有关：

HTML标签上的value是初始值属性，仅在页面首次渲染时决定输入框的默认值。用户输入或者JS动态赋值时，只会更新DOM节点对象上的value属性（属于JS对象的属性，不会反映到HTML标签上），所以你在审查元素面板看不到更新后的value值。
react-hook-form默认采用不受控组件方案，通过register返回的ref直接操作DOM节点的value Property完成赋值，不会主动同步更新HTML标签上的value Attribute，也不会默认绑定React层面的value prop，因此依赖[value]属性选择器的CSS规则无法匹配生效。

可行解决方案

方案1（推荐）：调整CSS选择器逻辑，放弃依赖[value]属性的选择器。可以结合react-hook-form提供的formState（包含dirtyFields、touchedFields、errors等状态）给外层容器或者输入框动态添加类名来控制样式，也可以用输入框自带的:placeholder-shown、:valid、:user-invalid等原生伪类实现样式效果，匹配react-hook-form的不受控设计逻辑，性能最优。
方案2：切换为受控组件模式，给input标签显式绑定value prop，值从react-hook-form的watch方法或者register返回的field.value中获取，此时React会自动同步维护HTML标签的value Attribute，原有CSS规则可以直接生效，示例代码如下：

import React from 'react';

const CustomInput = (props: any) => {
  const { label, name, className, type, onChange, register, disabled } = props;
  const { field } = register(name, {
    onChange: (e) => {
      onChange?.();
    }
  });
  
  return (
    <div className="custom--input--container">
      <input
        type={type}
        name={name}
        {...field}
        className={`custom--input ${className}`}
        disabled={disabled}
      />
      <span className="custom--input--label">{label}</span>
    </div>
  );
};

export default CustomInput;

方案3（不推荐）：手动同步value到HTML Attribute，在输入框的onChange事件中调用setAttribute方法把当前值写到HTML标签上，适合不愿意修改原有CSS的临时场景：

onChange={e => {
  onChange();
  const currentValue = e.target.value;
  setValue(name, currentValue, { shouldValidate: true });
  e.target.setAttribute('value', currentValue);
}}

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