美文网首页
React中的内联CSS样式:如何实现:hover?

React中的内联CSS样式:如何实现:hover?

作者: 仅此而已001 | 来源:发表于2018-01-02 14:28 被阅读0次

这里主要介绍的是通过onMouseEnter,onMouseLeave事件来改变状态

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,大家一起讨论,一起进步,后续更新中...

相关文章

网友评论

      本文标题:React中的内联CSS样式:如何实现:hover?

      本文链接:https://www.haomeiwen.com/subject/runfnxtx.html