Question

React的新功能。我正在尝试使用React将光标悬停在按钮上时为按钮实现颜色更改。当我在本地运行我的应用程序时，悬停似乎没有任何效果。有时我会收到＆＃34;超出最大调用堆栈大小＆＃34;加载应用程序时也会出现致命错误。我相信我已经正确设置了代码，但很明显，事实并非如此。任何帮助将不胜感激！

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

您需要进行两项更改。首先在你的button元素中，你需要像这样传递你的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)
}

悬停不工作onMouseEnter和onMouseLeave React。超出最大调用堆栈大小

1 个答案: