React输入框始终触发:valid伪类的问题排查与解决

问题背景 #

我写了一个React SearchBar组件，想实现输入框有文本时文字变红的效果，用了:valid伪类但始终生效，即使输入框为空也显示红色。组件和CSS代码如下：

React组件 #

export const SearchBar = ({
  searchInput,
  updateSearchKeyword,
}: SearchBarProps) => {
  const dummy = "";
  return (
    <div className={`${styles.container}`}>
      <input
        className={`${styles["search-bar"]}`}
        type="text"
        value={dummy}
        title="search"
        placeholder="Search..."
        onChange={(e) => updateSearchKeyword(e.target.value)}
      />      
    </div>
  );
};

CSS（modules.css） #

.search-bar:valid {
  color: red;
}

尝试过限定[type="text"]、添加pattern属性都没用，其他样式能正常生效（使用了CSS Modules）。

问题原因 #

1. React组件的value绑定错误：输入框的value绑定了dummy空字符串，而非传入的searchInput，导致输入框的值不会随状态更新，样式判断的基础就错了。
2. :valid伪类的逻辑问题：默认情况下，type="text"的输入框没有required属性时，空值属于合法状态，所以:valid会一直生效，不管有没有输入内容。

解决方案 #

第一步：修复React组件的value绑定 #

首先把输入框的value改成传入的searchInput，保证输入框的值和状态同步：

export const SearchBar = ({
  searchInput,
  updateSearchKeyword,
}: SearchBarProps) => {
  return (
    <div className={`${styles.container}`}>
      <input
        className={`${styles["search-bar"]}`}
        type="text"
        value={searchInput} // 改成searchInput
        title="search"
        placeholder="Search..."
        onChange={(e) => updateSearchKeyword(e.target.value)}
      />      
    </div>
  );
};

第二步：选择合适的CSS伪类实现样式需求 #

方案1：使用:not(:placeholder-shown)（推荐）

这个伪类会在输入框有内容、占位符隐藏时生效，不需要额外属性，逻辑更直接：

.search-bar:not(:placeholder-shown) {
  color: red;
}

方案2：结合required和:valid

如果可以接受required的行为（空输入时输入框处于无效状态），可以给输入框添加required属性，再用:valid控制样式：

<input
  className={`${styles["search-bar"]}`}
  type="text"
  value={searchInput}
  title="search"
  placeholder="Search..."
  required // 添加required属性
  onChange={(e) => updateSearchKeyword(e.target.value)}
/>

对应的CSS：

.search-bar:valid {
  color: red;
}
/* 可选：重置浏览器默认的invalid状态样式 */
.search-bar:invalid {
  box-shadow: none;
  border-color: initial;
}

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