react学习笔记

1.鼠标事件中的差异（当hover时，iconfont图标发生变化）

<code>

  toggleHoverUser() {

this.setState({

isHoverUser: true,

isHoverShutdown: false,

});

}

toggleShutdown() {

this.setState({

isHoverUser: false,

isHoverShutdown: true,

});

}

</code>

使用onMouseOver无效，需要用onMouseEnter代替才能生效。

使用onMouseOut无效，需要用onMouseLeave代替才能生效

this.state = {

isHoverUser: false,

isHoverShutdown: false,

};

toggleHoverUser() {

       this.setState({

              isHoverUser: true,

              isHoverShutdown: false,

      });

}

toggleShutdown() {

           this.setState({

                   isHoverUser: false,

                   isHoverShutdown: true,

     });

}

2.HTML中的data扩展属性读取，之前一直以为react没有这个功能。通过dataset读取DOM中设置的data-name属性。

<button className="ant-btn" onClick={this.toogleSearch.bind(this)} data-name="search"/>

toogleSearch(e) {

console.log(e.target.dataset.name);  //search

}