如何在另一个元素 REACT 上更改元素 onClick 的样式？

Question

I want to change .page-header when i click on standard-basic. I tried to do this:

#standard-basic:focus ~ .page-header{
  display: none;
}

But it can't help me. How can change style of page-header in react or maybe just in js? I use functional component

 <span id="pageHeader" className="page-header">TechPrice</span>
  <form
    className={props.classes.root}
    noValidate
    autoComplete="off"
    className="search-form"
  >
    <TextField className="textField" id="standard-basic" label="Поиск" />
    <SearchIcon className="search-icon" />
  </form>

Answer 1

I think you need to use style object and set display prop to none depend on some state

Example:

<span id="pageHeader" style={{"display": `isVisible ? "block" : "none"`}}>TechPrice</span>

Answer 2

There is no parent selector in CSS/CSS3 .

Please read this topic: Is there a CSS parent selector?

To achieve your goal you have to use JavaScript/React/any other framework/library