React中如何在输入框获焦时修改元素CSS类实现图标变色

我正在制作一个搜索框，要求输入框获焦时，其中的放大镜图标变为蓝色。MagnifyingGlass组件会从父元素继承颜色，现在需要解决的问题是：如何在输入框获焦时修改对应元素的CSS类？

现有代码如下：

import styles from './Search.module.sass';
import { useState } from 'react';
import MagnifyingGlass from '../../icons/MagnifyingGlass';

const Search = () => {
  const [inputValue, setInputValue] = useState('');
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div className={styles.searchWrapper}>
      <input
        value={inputValue}
        onChange={handleChange}
        className={styles.searchInput}
        type='text'
        placeholder='Waar bent u naar opzoek?'
      />
      <span> {/* 需要添加能改变颜色的className */}
        <MagnifyingGlass size='small' /> {/* 从父元素继承颜色 */}
      </span>
    </div>
  );
};
export default Search;

方法一：用React状态跟踪焦点状态 #

通过添加状态变量控制span的类名，适合需要和其他业务逻辑联动的场景：

1. 添加isFocused状态变量，跟踪输入框的焦点状态
2. 给输入框绑定onFocus和onBlur事件，更新状态
3. 根据状态动态给span添加样式类

修改后的完整代码：

import styles from './Search.module.sass';
import { useState } from 'react';
import MagnifyingGlass from '../../icons/MagnifyingGlass';

const Search = () => {
  const [inputValue, setInputValue] = useState('');
  // 添加焦点状态
  const [isFocused, setIsFocused] = useState(false);
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div className={styles.searchWrapper}>
      <input
        value={inputValue}
        onChange={handleChange}
        className={styles.searchInput}
        type='text'
        placeholder='Waar bent u naar opzoek?'
        // 绑定焦点事件
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
      {/* 根据状态添加类名 */}
      <span className={isFocused ? styles.iconBlue : ''}>
        <MagnifyingGlass size='small' />
      </span>
    </div>
  );
};
export default Search;

在Search.module.sass中添加对应样式：

.iconBlue
  color: blue

方法二：纯CSS兄弟选择器（更简洁） #

不需要修改JS逻辑，直接利用CSS相邻兄弟选择器:focus + span实现，性能更优：

在Search.module.sass中添加样式：

.searchWrapper
  // 确保输入框和span处于同一层级，兄弟选择器生效
  display: flex

.searchInput
  // 你的原有输入框样式
  &:focus + span
    color: blue

这种方法下JSX无需修改，输入框获焦时，后方的span会自动应用蓝色样式，完全靠CSS完成样式切换。

两种方法各有优势：如果需要在焦点变化时处理其他逻辑（比如显示下拉列表），选方法一；如果只是单纯切换样式，方法二更简洁高效。

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