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>
    );
  }

Answer 2

如果您使用的是jquery。您可以使用此代码，这将为您工作。谢谢。

 $(document).ready(function(){
    $('.menu').find('.menu-item').mouseover(function(){
        $(".menu").css("background-color", "white");
    }).mouseleave(function(){
        $(".menu").css("background-color", "red");
    })
});

Answer 3

您可以为此使用组件的状态。并创建一个连接到菜单div的样式变量。

有关反应状态的信息：https://reactjs.org/docs/state-and-lifecycle.html

使用react鼠标事件来触发组件中的功能，并为其赋予您要使用的颜色（字符串）。您需要将其和颜色绑定到函数上，以使其起作用。

更多有关反应事件的信息：https://reactjs.org/docs/handling-events.html

class Home extends React.Component {
  
  constructor(){
    this.state = {
      color: "white"
    }
  }
  
  changeColor (color) {
    this.setState({
      color: color
    })
  }
  
  render(){
    let styles = {
      backgroundColor: this.state.color
    }
    return (
      <div className="menu" style={styles}>
        <div className="middle">  
          <div onMouseOver={this.changeColor.bind(this, "#333")} className="menu-item btn-sobre">1</div>
          <div onMouseOver={this.changeColor.bind(this, "#999")} className="menu-item btn-questionario">2</div>
          <div onMouseOver={this.changeColor.bind(this, "#000")} className="menu-item btn-estresse">3</div>
          <div onMouseOver={this.changeColor.bind(this, "#ccc")} className="menu-item btn-depressao">4</div>
          <div onMouseOver={this.changeColor.bind(this, "#666")} className="menu-item btn-ansiedade">5</div>
        </div>
      </div>
    );
  }
}

更改孩子悬停的父母背景

3 个答案: