Comment vous Placez dans ReactJS? - onMouseLeave pas enregistrés au cours rapide survolez

Avez-vous essayé l'un de ces?

onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

https://facebook.github.io/react/docs/events.html

il mentionne également les éléments suivants:

Réagir normalise les événements de sorte qu'ils ont cohérente propriétés à travers les différents navigateurs.

Les gestionnaires d'événements ci-dessous sont déclenchés par un événement dans la phase de propagation. Pour enregistrer un gestionnaire d'événement pour la phase de capture, l'ajout de la Capture de l'événement nom; par exemple, au lieu d'utiliser onClick, vous pouvez utiliser onClickCapture pour gérer l'événement click dans la phase de capture.

Si vous pouvez produire une petite démo montrant les onMouseEnter /onMouseLeave ou onMouseDown /onMouseUp bug, il serait utile de le poster à ReactJS les questions de page ou une liste de diffusion, juste pour poser la question et d'entendre ce que les développeurs ont à dire à ce sujet.

Dans votre cas, vous semblent indiquer que les CSS :hover et :active les états seraient assez pour vos besoins, alors je vous suggère de les utiliser. CSS est un ordre de grandeur plus rapide et plus fiable que le Javascript, car il est directement mis en œuvre dans le navigateur.

Cependant, :hover et :active les états ne peuvent pas être spécifiées dans des styles en ligne. Ce que vous pouvez faire est d'attribuer un ID ou un nom de classe de vos éléments et écrire vos styles dans une feuille de style, si elles sont un peu constant dans votre application, ou dans un générées dynamiquement <style> tag.

Voici un exemple de la dernière technique: https://jsfiddle.net/ors1vos9/

Je viens de tombé sur ce même problème lors de l'écoute pour onMouseLeave événements sur un bouton désactivé. J'ai travaillé autour d'elle en l'écoutant pour le natif mouseleave événement sur un élément qui entoure le bouton désactivé.

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>
);
}

Ici un violon https://jsfiddle.net/qfLzkz5x/8/

Remarque: Cette réponse était pour une version précédente de cette question " d'où la question, le demandeur a essayé de l'utiliser JavaScript pour appliquer des styles css... qui peut simplement être fait avec les CSS.

Un simple cssseule solution.

Pour appliquer des styles de base, le CSS est plus simple et plus performant que JS solutions 99% du temps. (Bien que plus moderne CSS-en-JS les solutions, par exemple. Réagir Composants, etc — sont sans doute plus facile à gérer.)

Exécuter cet extrait de code pour le voir en action...

CSS:

.hover-button .hover-button--on,
.hover-button:hover .hover-button--off {
display: none;
}
.hover-button:hover .hover-button--on {
display: inline;
}

HTML:

<button class='hover-button'>
<span class='hover-button--off'>Default</span>
<span class='hover-button--on'>Hover!</span>
</button>

Utilisation Radium!

L'exemple suivant est un exemple de leur site web:

JS:

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'
}
};

Je sais, Ça fait un moment depuis que cette question a été posée, mais je viens de courir dans le même problème d'incompatibilité avec onMouseLeave()
Ce que j'ai fait est d'utiliser onMouseOut() pour que la liste déroulante et de la souris congé pour l'ensemble du menu, il est fiable et fonctionne à chaque fois que je l'ai testé.
J'ai vu ce qui se passe ici dans les docs: https://facebook.github.io/react/docs/events.html#mouse-events
voici un exemple d'utilisation de 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>
)
}

Je pourrais vous suggérer un exemple qui a été facile pour moi de comprendre, j'utilise de l'émotion à Réagir JS pour donner les styles.
Ici vous pouvez trouver plus d'informations de https://emotion.sh/docs/introduction espère que cela vous aidera.

const secondStyle = css`
background: blue;
height: 20px;
width: 20px;
:hover {
cursor: pointer;
background: red;
`
function myComponent() {
return (
<div className={firstStyle}>
<button className={secondStyle}>Submit<button>
)
}