React中的内联CSS样式：如何实现：hover？

2024年2月4日 156次阅读 来源: 仅此而已

这里主要介绍的是通过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，大家一起讨论，一起进步，后续更新中…

    原文作者：仅此而已
    原文地址: https://segmentfault.com/a/1190000012698530
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞