Как изменить класс родительского элемента при наведении на дочерний?

Question

[IIITRIX]

constructor(){
    super();
    this.state = {
        isHovered: false
    };
    this.handleHover = this.handleHover.bind(this);
}
handleHover(){
    this.setState(prevState => ({
        isHovered: !prevState.isHovered
    }));
}
render(){
    const btnClass = this.state.isHovered ? "pulse" : "";
    return (
      <div className="РОДИТЕЛЬ"></div>
      <div className={btnClass} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></div>
    )
}

Comments

[Robur]

И где у вас тут родительский и дочерний?

[IIITRIX]

<div className="РОДИТЕЛЬ"></div>
<div className='ДОЧЕРНИЙ' onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></div>

[Robur]

IIITRIX, это у вас просто два несвязанных между собой div.
Ставьте "родителю" класс в зависимости от isHovered и все.

[IIITRIX]

Robur, Я это понимаю! Но у меня получается что isHovered присваивается к дочернему и делает подсветку самого себя
сделал так

const btnClass = this.state.isHovered ? " highlighted" : ""
<div className={"РОДИТЕЛЬ" + (btnClass)}></div>
<div className='ДОЧЕРНИЙ' onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}></div>

[Robur]

ну, какому элементу вы btnClass пропишете - у того и поменяется. неважно на каком вы мышкой водите.

Answer 1

[Антон Спирин]

Lifting state up