インラインスタイリングを行うときに、ReactJSでホバーイベントまたはアクティブイベントをどのように達成できますか?
onMouseEnter、onMouseLeaveのアプローチにはバグがあることがわかったので、別の方法があることを期待しています。
具体的には、コンポーネントにすばやくマウスを合わせると、onMouseEnterイベントのみが登録されます。onMouseLeaveは起動しないため、状態を更新できません...コンポーネントがまだホバーされているように見えます。「:active」css疑似クラスを模倣した場合も、同じことに気づきました。本当に速くクリックすると、onMouseDownイベントだけが登録されます。onMouseUpイベントは無視されます...コンポーネントはアクティブなままです。
これが問題を示すJSFiddleです:https ://jsfiddle.net/y9swecyu/5/
問題のあるJSFiddleのビデオ:https ://vid.me/ZJEO
コード:
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function() {
this.setState({
hover: true
});
console.log('enter');
},
onMouseLeaveHandler: function() {
this.setState({
hover: false
});
console.log('leave');
},
render: function() {
var inner = normal;
if(this.state.hover) {
inner = hover;
}
return (
<div style={outer}>
<div style={inner}
onMouseEnter={this.onMouseEnterHandler}
onMouseLeave={this.onMouseLeaveHandler} >
{this.props.children}
</div>
</div>
);
}
});
var outer = {
height: '120px',
width: '200px',
margin: '100px',
backgroundColor: 'green',
cursor: 'pointer',
position: 'relative'
}
var normal = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 0
}
var hover = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 1
}
React.render(
<Hover></Hover>,
document.getElementById('container')
)