css - paginas - react javascript ejemplos
¿Cómo te mueves en ReactJS?-onMouseLeave no registrado durante el deslizamiento rápido sobre (10)
Sé que ha pasado un tiempo desde que se hizo esta pregunta, pero me encuentro con el mismo problema de inconsistencia con onMouseLeave () Lo que hice fue usar onMouseOut () para la lista desplegable y dejar el mouse para todo el menú, es confiable y funciona cada vez que lo he probado. Vi los eventos aquí en los documentos: https://facebook.github.io/react/docs/events.html#mouse-events aquí hay un ejemplo usando https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp :
handleHoverOff(event){
//do what ever, for example I use it to collapse the dropdown
let collapsing = true;
this.setState({dropDownCollapsed : collapsing });
}
render{
return(
<div class="dropdown" onMouseLeave={this.handleHoverOff.bind(this)}>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" onMouseOut={this.handleHoverOff.bind(this)}>
<li><a href="#">bla bla 1</a></li>
<li><a href="#">bla bla 2</a></li>
<li><a href="#">bla bla 3</a></li>
</ul>
</div>
)
}
¿Cómo se puede lograr un evento de vuelo estacionario o un evento activo en ReactJS cuando se realiza un diseño 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 dispara y, por lo tanto, no puede actualizar el estado ... dejando que el componente parezca como si aún estuviera sobrevolando. Me di cuenta de lo mismo si intentas imitar la pseudoclase css ": activa". Si hace clic muy rápido, solo se registrará el evento onMouseDown. El evento onMouseUp será ignorado ... dejando el componente que aparece 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'')
)
Un paquete llamado styled-components puede resolver este problema de una manera ELEGANTE .
Referencia
Ejemplo
const styled = styled.default
const Square = styled.div`
height: 120px;
width: 200px;
margin: 100px;
background-color: green;
cursor: pointer;
position: relative;
&:hover {
background-color: red;
};
`
class Application extends React.Component {
render() {
return (
<Square>
</Square>
)
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById(''app''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id=''app''></div>
Yo personalmente uso Style It para estilo en línea en React o mantengo mi estilo por separado en un archivo CSS o SASS ...
Pero si realmente te interesa hacerlo en línea, mira la biblioteca, comparto algunos de los usos a continuación:
En el componente :
import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
return (
<Style>
{`
.intro {
font-size: 40px;
}
`}
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
</Style>
);
}
}
export default Intro;
Salida :
<p class="intro _scoped-1">
<style type="text/css">
._scoped-1.intro {
font-size: 40px;
}
</style>
CSS-in-JS made simple -- just Style It.
</p>
También puede usar variables de JavaScript con el control deslizante en su CSS de la siguiente manera:
import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
const fontSize = 13;
return Style.it(`
.intro {
font-size: ${ fontSize }px; // ES2015 & ES6 Template Literal string interpolation
}
.package {
color: blue;
}
.package:hover {
color: aqua;
}
`,
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
);
}
}
export default Intro;
Y el resultado de la siguiente manera:
<p class="intro _scoped-1">
<style type="text/css">
._scoped-1.intro {
font-size: 13px;
}
._scoped-1 .package {
color: blue;
}
._scoped-1 .package:hover {
color: aqua;
}
</style>
CSS-in-JS made simple -- just Style It.
</p>
Si puede producir una pequeña demostración que muestre el error onMouseEnter / onMouseLeave o onMouseDown / onMouseUp, valdría la pena publicarla en la página de problemas o en la lista de correo de ReactJS, solo para plantear la pregunta y escuchar lo que los desarrolladores tienen que decir al respecto.
En su caso de uso, parece implicar que CSS: hover y: estados activos serían suficientes para sus propósitos, por lo que le sugiero que los use. CSS es mucho más rápido y confiable que Javascript, ya que se implementa directamente en el navegador.
Sin embargo,: hover y: estados activos no se pueden especificar en estilos en línea. Lo que puede hacer es asignar una ID o un nombre de clase a sus elementos y escribir sus estilos en una hoja de estilos, si son algo constantes en su aplicación, o en una etiqueta <style> generada dinámicamente.
Aquí hay un ejemplo de la última técnica: https://jsfiddle.net/ors1vos9/
¿Has probado alguno de estos?
onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
https://facebook.github.io/react/docs/events.html
también menciona lo siguiente:
React normaliza los eventos para que tengan propiedades consistentes en diferentes navegadores.
Los controladores de eventos a continuación se desencadenan por un evento en la fase de burbujeo. Para registrar un controlador de eventos para la fase de captura, anexe Capture al nombre del evento; por ejemplo, en lugar de usar onClick, usaría onClickCapture para manejar el evento click en la fase de captura.
¡Usa Radium !
El siguiente es un ejemplo de su sitio web:
var Radium = require(''radium'');
var React = require(''react'');
var color = require(''color'');
@Radium
class Button extends React.Component {
static propTypes = {
kind: React.PropTypes.oneOf([''primary'', ''warning'']).isRequired
};
render() {
// Radium extends the style attribute to accept an array. It will merge
// the styles in order. We use this feature here to apply the primary
// or warning styles depending on the value of the `kind` prop. Since its
// all just JavaScript, you can use whatever logic you want to decide which
// styles are applied (props, state, context, etc).
return (
<button
style={[
styles.base,
styles[this.props.kind]
]}>
{this.props.children}
</button>
);
}
}
// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
base: {
color: ''#fff'',
// Adding interactive state couldn''t be easier! Add a special key to your
// style object (:hover, :focus, :active, or @media) with the additional rules.
'':hover'': {
background: color(''#0074d9'').lighten(0.2).hexString()
}
},
primary: {
background: ''#0074D9''
},
warning: {
background: ''#FF4136''
}
};
Acabo de tropezar con este mismo problema al escuchar eventos onMouseLeave en un botón deshabilitado. Lo resolví escuchando el evento nativeleath mouse en un elemento que envuelve el botón deshabilitado.
componentDidMount() {
this.watchForNativeMouseLeave();
},
componentDidUpdate() {
this.watchForNativeMouseLeave();
},
// onMouseLeave doesn''t work well on disabled elements
// https://github.com/facebook/react/issues/4251
watchForNativeMouseLeave() {
this.refs.hoverElement.addEventListener(''mouseleave'', () => {
if (this.props.disabled) {
this.handleMouseOut();
}
});
},
render() {
return (
<span ref=''hoverElement''
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<button disabled={this.props.disabled}>Submit</button>
</span>
);
}
Aquí hay un violín https://jsfiddle.net/qfLzkz5x/8/
Tuve un problema similar cuando se llamó a onMouseEnter pero a veces el evento onMouseLeave correspondiente no se activó, aquí hay una solución alternativa que funciona bien para mí (se basa parcialmente en jQuery):
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function(e) {
this.setState({
hover: true
});
console.log(''enter'');
$(e.currentTarget).one("mouseleave", function (e) {
this.onMouseLeaveHandler();
}.bind(this));
},
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} >
{this.props.children}
</div>
</div>
);
}
});
Ver en jsfiddle: http://jsfiddle.net/qtbr5cg6/1/
¿Por qué estaba sucediendo (en mi caso)? Estoy ejecutando una animación de desplazamiento jQuery (a través de $(''#item'').animate({ scrollTop: 0 }) ) al hacer clic en el elemento. Por lo tanto, el cursor no deja el elemento "naturalmente", sino durante una animación guiada por JavaScript ... y en este caso, React no activó correctamente onMouseLeave (React 15.3.0, Chrome 51, Desktop)
No se puede con el estilo en línea solo. No recomendamos volver a implementar las funciones de CSS en JavaScript. Ya tenemos un lenguaje extremadamente potente e increíblemente rápido para este caso de uso: CSS. ¡Entonces úsalo! Made Style It para ayudar.
npm install style-it --save
Sintaxis funcional ( JSFIDDLE )
import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
return Style.it(`
.intro:hover {
color: red;
}
`,
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
);
}
}
export default Intro;
Sintaxis JSX ( JSFIDDLE )
import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
return (
<Style>
{`
.intro:hover {
color: red;
}
`}
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
</Style>
}
}
export default Intro;
Las respuestas anteriores son bastante confusas. No necesita un estado de reacción para resolver esto, ni ninguna lib externa especial. Se puede lograr con pure 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 reactivo
Una simple función de renderizado puro de 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>