React函数组件中点击元素修改另一元素样式的实现方法

你的CSS选择器 #standard-basic:focus ~ .page-header 失效的核心原因是层级关系不匹配：.page-header 是 form 的前一个兄弟元素，而 #standard-basic 是 form 的子元素。CSS的兄弟选择器只能选中同一层级的后续元素，跨层级或者前面的元素根本没法通过纯CSS定位到，所以这条路走不通。

下面分别给出React函数组件和纯JS的实现方案：

React函数组件方案（推荐） #

利用React的状态管理来控制头部的显示/隐藏，符合React的声明式编程理念：

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import SearchIcon from '@mui/icons-material/Search';

const YourComponent = (props) => {
  // 初始化状态：头部默认显示
  const [isHeaderVisible, setIsHeaderVisible] = useState(true);

  return (
    <>
      <span 
        id="pageHeader" 
        className="page-header"
        // 根据状态直接控制display属性，也可以用类名切换
        style={{ display: isHeaderVisible ? 'inline' : 'none' }}
      >
        TechPrice
      </span>
      <form 
        className={`${props.classes.root} search-form`} 
        noValidate 
        autoComplete="off"
      >
        <TextField 
          className="textField" 
          id="standard-basic" 
          label="Поиск"
          // 输入框获取焦点时隐藏头部
          onFocus={() => setIsHeaderVisible(false)}
          // 输入框失去焦点时显示头部
          onBlur={() => setIsHeaderVisible(true)}
        />
        <SearchIcon className="search-icon" />
      </form>
    </>
  );
};

export default YourComponent;

如果更倾向于用CSS类名切换（方便扩展更多样式），可以这样写：

// JSX部分
<span 
  id="pageHeader" 
  className={`page-header ${!isHeaderVisible ? 'header-hidden' : ''}`}
>
  TechPrice
</span>

// 对应的CSS
.header-hidden {
  display: none;
}

纯JS方案（非React场景） #

如果是在普通HTML/JS项目中，可以直接操作DOM元素的样式：

// 获取目标元素
const pageHeader = document.getElementById('pageHeader');
const searchInput = document.getElementById('standard-basic');

// 添加焦点事件监听
searchInput.addEventListener('focus', () => {
  pageHeader.style.display = 'none';
});

// 添加失焦事件监听
searchInput.addEventListener('blur', () => {
  pageHeader.style.display = 'inline'; // 这里根据你原来的display值调整，比如block
});

内容的提问来源于stack exchange，提问作者Денис Босый