React中的內聯CSS樣式:如何實現:hover?

這裏主要介紹的是經過onMouseEnter,onMouseLeave事件來改變狀態this

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

但願你們喜歡,也但願你們指點錯誤,也能夠加入qq羣439667347,你們一塊兒討論,一塊兒進步,後續更新中...code

相關文章
相關標籤/搜索