React中如何在子输入框聚焦时为父级div添加阴影效果

有两种常用方式可以实现需求，可根据实际场景选择：

方案1：纯CSS实现（推荐） #

无需修改JSX代码，直接利用CSS的:focus-within伪类即可实现，该伪类会在元素内部任意可聚焦元素获得焦点时生效，刚好匹配你的需求。
在你的CSS文件中添加如下样式即可：

.searchBarFirstDiv:focus-within {
  /* 替换为你需要的阴影参数 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease; /* 可加过渡效果更自然 */
}

注意：该特性兼容所有现代浏览器，仅在需要兼容IE11及更早版本时才需要考虑第二种方案。

方案2：React状态控制实现 #

如果有自定义逻辑需求或者需要兼容旧浏览器，可以通过React状态控制父元素类名实现：

1. 首先修改你的JSX代码，添加状态和焦点事件监听：

import { useState } from 'react';
// 保留你原来的CSS引入
import css from '你的样式文件路径';

function 你的组件名() {
  // 存储输入框聚焦状态
  const [isInputFocused, setIsInputFocused] = useState(false);

  return (
    {/* 动态添加聚焦时的类名 */}
    <div className={`${css.searchBarFirstDiv} ${isInputFocused ? css.focused : ''}`}>
      {/* 注意React中for属性需要替换为htmlFor避免告警 */}
      <label className={css.searchBarDivContent} htmlFor="location-search-input">
        <div className={css.searchBarHeadingFont}>Location</div>
        <input
          id="location-search-input"
          placeholder="Where are you going?"
          className={css.searchBarInput}
          {/* 绑定焦点事件修改状态 */}
          onFocus={() => setIsInputFocused(true)}
          onBlur={() => setIsInputFocused(false)}
        />            
      </label>
    </div>
  )
}

2. 在CSS文件中添加对应聚焦类的阴影样式：

.searchBarFirstDiv.focused {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease;
}

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