1.鼠標(biāo)事件中的差異(當(dāng)hover時(shí),iconfont圖標(biāo)發(fā)生變化)
<code>
? toggleHoverUser() {
this.setState({
isHoverUser: true,
isHoverShutdown: false,
});
}
toggleShutdown() {
this.setState({
isHoverUser: false,
isHoverShutdown: true,
});
}
</code>
使用onMouseOver無(wú)效缕溉,需要用onMouseEnter代替才能生效厌均。
使用onMouseOut無(wú)效唬滑,需要用onMouseLeave代替才能生效
this.state = {
isHoverUser: false,
isHoverShutdown: false,
};
toggleHoverUser() {
? ? ? ?this.setState({
? ? ? ? ? ? ? isHoverUser: true,
? ? ? ? ? ? ? isHoverShutdown: false,
? ? ? });
}
toggleShutdown() {
? ? ? ? ? ?this.setState({
? ? ? ? ? ? ? ? ? ?isHoverUser: false,
? ? ? ? ? ? ? ? ? ?isHoverShutdown: true,
? ? ?});
}
2.HTML中的data擴(kuò)展屬性讀取,之前一直以為react沒(méi)有這個(gè)功能棺弊。通過(guò)dataset讀取DOM中設(shè)置的data-name屬性晶密。
<button className="ant-btn" onClick={this.toogleSearch.bind(this)} data-name="search"/>
toogleSearch(e) {
console.log(e.target.dataset.name);? //search
}