Comment pouvez-vous obtenir un événement de survol ou un événement actif dans ReactJS lorsque vous effectuez un style en ligne?

J'ai trouvé que l'approche onMouseEnter, onMouseLeave est boguée, j'espère donc qu'il existe une autre façon de le faire.

Plus précisément, si vous passez la souris sur un composant très rapidement, seul l'événement onMouseEnter est enregistré. OnMouseLeave ne se déclenche jamais, et ne peut donc pas mettre à jour l'état ... laissant le composant apparaître comme s'il était toujours survolé. J'ai remarqué la même chose si vous essayez d'imiter la pseudo-classe css ": active". Si vous cliquez très rapidement, seul l'événement onMouseDown s'enregistrera. L'événement onMouseUp sera ignoré ... laissant le composant apparaître actif.

Voici un JSFiddle montrant le problème: https://jsfiddle.net/y9swecyu/5/

Vidéo de JSFiddle avec problème: https://vid.me/ZJEO

Le code:

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')
)

Avez-vous essayé l'un d'entre eux?

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

il mentionne également ce qui suit:

React normalise les événements afin qu'ils aient des propriétés cohérentes dans différents navigateurs.

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

Les réponses précédentes sont assez déroutantes. Vous n'avez pas besoin d'un état de réaction pour résoudre cela, ni d'une bibliothèque externe spéciale. Cela peut être réalisé avec du css / sass pur:

Le style:

.hover {
  position: relative;

  &:hover &__no-hover {
    opacity: 0;
  }

  &:hover &__hover {
    opacity: 1;
  }

  &__hover {
    position: absolute;
    top: 0;
    opacity: 0;
  }

  &__no-hover {
    opacity: 1;
  }
}

Le composant React

Une simple Hoverfonction de rendu pur:

const Hover = ({ onHover, children }) => (
    <div className="hover">
        <div className="hover__no-hover">{children}</div>
        <div className="hover__hover">{onHover}</div>
    </div>
)

Usage

Ensuite, utilisez-le comme ceci:

    <Hover onHover={<div> Show this on hover </div>}>
        <div> Show on no hover </div>
    </Hover>

vous pouvez utiliser onMouseOver={this.onToggleOpen}et onMouseOut={this.onToggleOpen}réfléchir encore et encore sur le composant

Si vous pouvez produire une petite démo montrant le bogue onMouseEnter / onMouseLeave ou onMouseDown / onMouseUp, il vaudrait la peine de la publier sur la page des problèmes ou la liste de diffusion de ReactJS, juste pour soulever la question et entendre ce que les développeurs ont à dire à ce sujet.

Dans votre cas d'utilisation, vous semblez impliquer que CSS: hover et: active states serait suffisant pour vos besoins, je vous suggère donc de les utiliser. CSS est des ordres de grandeur plus rapide et plus fiable que Javascript, car il est directement implémenté dans le navigateur.

Cependant, les états: hover et: active ne peuvent pas être spécifiés dans les styles en ligne. Ce que vous pouvez faire, c'est attribuer un ID ou un nom de classe à vos éléments et écrire vos styles soit dans une feuille de style, s'ils sont quelque peu constants dans votre application, ou dans une <style>balise générée dynamiquement .

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

Remarque: Cette réponse était pour une version précédente de cette question où le demandeur de question essayait d'utiliser JavaScript pour appliquer des styles css… ce qui peut simplement être fait avec CSS.

Une csssolution simple .

Pour appliquer des styles de base, CSS est plus simple et plus performant que les solutions JS 99% du temps. (Bien que les solutions CSS-in-JS plus modernes - par exemple, les composants React, etc. - soient sans doute plus faciles à maintenir.)

Exécutez cet extrait de code pour le voir en action…

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

.hover-button:hover .hover-button--on {
  display: inline;
}

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

Je viens de rencontrer ce même problème en écoutant les événements onMouseLeave sur un bouton désactivé. Je l'ai contourné en écoutant l'événement natif mouseleave 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>
    );
}

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

Un package appelé styled-componentspeut résoudre ce problème de manière ELEGANTE .

Référence

1. Glen Maddern - Styliser les applications React avec des composants stylisés

Exemple

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>

Vous ne pouvez pas avec le style en ligne seul. Ne recommandez pas de réimplémenter les fonctionnalités CSS en JavaScript, nous avons déjà un langage extrêmement puissant et incroyablement rapide pour ce cas d'utilisation - CSS. Alors utilisez-le! Made Style It pour vous aider.

npm install style-it --save

Syntaxe fonctionnelle ( 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;

Syntaxe 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;

Utiliser du radium !

Voici un exemple tiré de leur site 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'
  }
};

J'utiliserais onMouseOver et onMouseOut. Cause dans React

Les événements onMouseEnter et onMouseLeave se propagent de l'élément laissé à celui entré au lieu du bullage ordinaire et n'ont pas de phase de capture.

Le voici dans la documentation React pour les événements souris.

J'ai eu un problème similaire lorsque onMouseEnter a été appelé mais parfois l'événement onMouseLeave correspondant n'a pas été déclenché, voici une solution de contournement qui fonctionne bien pour moi (elle repose en partie sur 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>
        );
    }
});

Voir sur jsfiddle: http://jsfiddle.net/qtbr5cg6/1/

Pourquoi cela se passait-il (dans mon cas): J'exécute une animation de défilement jQuery (à travers $('#item').animate({ scrollTop: 0 })) en cliquant sur l'élément. Ainsi, le curseur ne quitte pas l'élément "naturellement", mais pendant une animation JavaScript ... et dans ce cas le onMouseLeave n'a pas été déclenché correctement par React (React 15.3.0, Chrome 51, Desktop)

Je sais que cela fait un moment que cette question a été posée mais je viens de rencontrer le même problème d'incohérence avec onMouseLeave () Ce que j'ai fait est d'utiliser onMouseOut () pour la liste déroulante et en laissant la souris pour tout le menu, c'est fiable et fonctionne à chaque fois que je l'ai testé. J'ai vu les événements ici dans la documentation: https://facebook.github.io/react/docs/events.html#mouse-events voici un exemple utilisant 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>
  )
}

J'utilise personnellement Style It pour le style en ligne dans React ou je garde mon style séparément dans un CSS ou un SASS fichier ...

Mais si vous êtes vraiment intéressé à le faire en ligne, regardez la bibliothèque, je partage quelques-unes des utilisations ci-dessous:

Dans le composant :

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;

Sortie :

    <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>

Vous pouvez également utiliser des variables JavaScript avec survol dans votre CSS comme ci-dessous:

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;

Et le résultat comme ci-dessous:

<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>

Personnellement, je trouve utiliser Emotion pour gérer de tels styles. Emotion est une bibliothèque CSS-in-JS qui peut rendre la gestion des styles React plus pratique en fonction de vos préférences, par opposition aux styles en ligne comme vous l'avez fait dans votre exemple. Ici vous pouvez trouver plus d'informations à ce sujet https://emotion.sh/docs/introduction espérons que cela vous aidera.

Voici un exemple simple d'Emotion qui ajoute un pointeur et un changement de couleur à un div lors du survol:

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