React中如何实现input聚焦时切换样式、失焦恢复原有样式

实现方案 #

调整输入框绑定的事件即可，不需要额外的ref判断，修改后的代码如下：

const [title, setTitle] = useState('');
const [isFocused, setIsFocused] = useState(false); // 语义化重命名状态，更易读

const changeHandler = (e) => {
  setTitle(e.target.value);
};

return (
  <header className={classes.header}>
    <div className={classes.search}>
      <GoSearch
        className={classes.searchIcon}
        style={{ color: isFocused ? 'white' : '#cccccc' }}
      />
      <input
        className={classes.searchInput}
        onFocus={() => setIsFocused(true)} // 聚焦时切换为白色
        onBlur={() => setIsFocused(false)} // 失焦时恢复原有配色
        onChange={changeHandler}
      />
    </div>
  </header>
);

改动说明 #

• 把原来语义模糊的isInput状态重命名为isFocused，代码可读性更高
• 移除了无用的inputRef和clickHandler逻辑，原有的点击事件逻辑存在缺陷：只能响应点击输入框的操作，无法响应键盘Tab切换聚焦的场景，换成原生的onFocus和onBlur事件可以覆盖所有输入框聚焦/失焦的场景
• 简单逻辑直接内联写事件绑定即可，不需要额外封装函数，逻辑更简洁

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