hover在MouseEnter和MouseEnter上不起作用React。超出了最大调用堆栈大小

Question

新反应。当光标悬停在使用React的按钮上时，我试图实现按钮的颜色更改。当我在本地运行应用程序时，悬停似乎没有任何效果。有时我在加载应用程序时也会收到“Maximum call stack size exceeded”致命错误。我相信我已经正确设置了代码，但显然，情况并非如此。任何帮助都将不胜感激！

export class Header extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
        hover: false
    }
}

    handleHover() {

    this.setState({
        hover: !this.state.hover
    })
}

   render(){

   var buttonStyle = {

        borderRadius: '5px',
        borderColor: 'red',
        marginTop: 25,

    }


   if(this.state.hover){

        buttonStyle = {
            backgroundColor: 'green',
            color: 'yellow'
        }
    }
    else{

        buttonStyle = {
            backgroundColor: 'blue',
            color: 'orange'
        }

    }


 }

 return(
     <button style={buttonStyle} onMouseEnter={this.handleHover()} onMouseLeave={this.handleHover()} type="button" className="btn btn-outline">Learn More</button>
  )
}

Answer 1

你需要做两个改变。首先在按钮元素中，需要像这样传递hove处理程序函数（不带括号）

<button style={buttonStyle} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} type="button" className="btn btn-outline">Learn More</button>

您需要像这样将悬停处理程序函数绑定到构造函数中的类

constructor(props) {
    super(props)
    this.state = {
        hover: false
    }
    this.handleHover = this.handleHover.bind(this)
}