javascript - 在子悬停时更改父背景

Question

所以我有这个代码:

import React, {Component} from 'react';
import '../../styles/css/Home.css';
import $ from 'jquery';

export default class Home extends Component {

  render(){
    return(
      <div className="menu">
        <div className="middle"> 
          <div className="menu-item btn-sobre"></div>
          <div className="menu-item btn-questionario"></div>
          <div className="menu-item btn-estresse"></div>
          <div className="menu-item btn-depressao"></div>
          <div className="menu-item btn-ansiedade"></div>
        </div>
      </div>
    );

    $(document).ready(function() {
      $(".btn-sobre").on("mouseover", function() {
            $(".menu").css("background-color", "red")
        }).on("mouseout", function() {
            $(".menu").css("background-color", "white")
        });
    });
  }
}

我试图在悬停任何“btn-*”类时更改“菜单”背景，但它不起作用

在那种情况下我能做什么(如果可能避免使用 jquery)？

Answer 1

不要将 jquery 与 react 混用

下面是如何仅使用 React 实现此目的

import React, {Component} from 'react';
import '../../styles/css/Home.css';

export default class Home extends Component {
  constructor() {
      this.state = {
          parentHover: false
      }
  }
  render(){
    return(
      <div className="menu" style={parentHover ? {"backgroundColor": "red"} : {}}>
        <div className="middle"> 
        <div className="menu-item btn-sobre" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-questionario" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        <div className="menu-item btn-estresse" onMouseOver={this.state.parentHover = true} onMouseOut={this.state.parentHover = false}></div>
        </div>
      </div>
    );
  }