Как вы можете достичь либо события зависания, либо активного события в 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')
)