¿Cómo puede lograr un evento de desplazamiento o un evento activo en ReactJS cuando realiza un estilo en línea?
Descubrí que el enfoque onMouseEnter, onMouseLeave tiene errores, por lo que espero que haya otra forma de hacerlo.
Específicamente, si pasa el mouse sobre un componente muy rápidamente, solo se registra el evento onMouseEnter. onMouseLeave nunca se activa y, por lo tanto, no puede actualizar el estado... dejando que el componente parezca como si todavía estuviera sobrevolado. He notado lo mismo si intenta imitar la pseudoclase css ": active". Si hace clic muy rápido, solo se registrará el evento onMouseDown. El evento onMouseUp será ignorado... dejando el componente activo.
Aquí hay un JSFiddle que muestra el problema: https://jsfiddle.net/y9swecyu/5/
Video de JSFiddle con problema: https://vid.me/ZJEO
El 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') )¿Has probado alguno de estos?
onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
también menciona lo siguiente:
React normaliza los eventos para que tengan propiedades consistentes en diferentes navegadores.
Los controladores de eventos a continuación son activados por un evento en la fase burbujeante. Para registrar un controlador de eventos para la fase de captura, agregue Capture al nombre del evento; por ejemplo, en lugar de usar onClick, usaría onClickCapture para manejar el evento de clic en la fase de captura.
Las respuestas anteriores son bastante confusas. No necesita un estado de reacción para resolver esto, ni ninguna biblioteca externa especial. Se puede lograr con puro css/sass:
El estilo:
.hover { position: relative; &:hover &__no-hover { opacity: 0; } &:hover &__hover { opacity: 1; } &__hover { position: absolute; top: 0; opacity: 0; } &__no-hover { opacity: 1; } }El componente de reacción
Una simple función de renderizado puro Hover :
const Hover = ({ onHover, children }) => ( <div className="hover"> <div className="hover__no-hover">{children}</div> <div className="hover__hover">{onHover}</div> </div> )Uso
Entonces úsalo así:
<Hover onHover={<div> Show this on hover </div>}> <div> Show on no hover </div> </Hover>puede usar onMouseOver={this.onToggleOpen} y onMouseOut={this.onToggleOpen} para reflexionar sobre el componente