Como você pode obter um evento hover ou um evento ativo no ReactJS ao fazer estilização embutida?
Descobri que a abordagem onMouseEnter, onMouseLeave tem bugs, então espero que haja outra maneira de fazer isso.
Especificamente, se você passar o mouse sobre um componente muito rapidamente, apenas o evento onMouseEnter será registrado. O onMouseLeave nunca dispara e, portanto, não pode atualizar o estado ... deixando o componente parecer como se ainda estivesse sendo pairado sobre ele. Eu percebi a mesma coisa se você tentar imitar a pseudo classe css ": active". Se você clicar muito rápido, apenas o evento onMouseDown será registrado. O evento onMouseUp será ignorado ... deixando o componente aparecendo ativo.
Aqui está um JSFiddle mostrando o problema: https://jsfiddle.net/y9swecyu/5/
Vídeo do JSFiddle com problema: https://vid.me/ZJEO
O código:
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')
)