Antwoord 11

Ik had een soortgelijk probleem toen onMouseEnter werd aangeroepen, maar soms werd de bijbehorende onMouseLeave-gebeurtenis niet geactiveerd, hier is een tijdelijke oplossing die goed voor mij werkt (het is gedeeltelijk afhankelijk van 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>
        );
    }
});

Zie op jsfiddle: http://jsfiddle.net/qtbr5cg6/1/

Waarom gebeurde het (in mijn geval): ik voer een jQuery-scrollanimatie uit (via $('#item').animate({ scrollTop: 0 })) wanneer klikken op het artikel. Dus de cursor verlaat het item niet “natuurlijk”, maar tijdens een JavaScript-gestuurde animatie … en in dit geval is de onMouseLeave niet correct geactiveerd door React (React 15.3.0, Chrome 51, Desktop)

Antwoord 12

Ik weet dat het een tijdje geleden is dat deze vraag werd gesteld, maar ik loop tegen hetzelfde probleem aan van inconsistentie met onMouseLeave()
Wat ik deed, is onMouseOut() gebruiken voor de vervolgkeuzelijst en bij muisverlof voor het hele menu, het is betrouwbaar en werkt elke keer dat ik het heb getest.
Ik zag de gebeurtenissen hier in de documenten: https://facebook.github .io/react/docs/events.html#mouse-events
hier is een voorbeeld met 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>
  )
}

Antwoord 13

Ik gebruik persoonlijk Style Itvoor inline-stijl in React of bewaar mijn stijl apart in een CSS– of SASS-bestand…

Maar als je echt geïnteresseerd bent om het inline te doen, kijk dan eens in de bibliotheek, ik deel hieronder enkele van de toepassingen:

In de component:

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;

Uitvoer:

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

U kunt ook JavaScript-variabelen gebruiken met hover in uw CSS, zoals hieronder:

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;

En het resultaat zoals hieronder:

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

Antwoord 14

Hover is een CSS-functie; het wordt geleverd met de CSS-kant van de app, dus doe het op de juiste manier is zo leuk. Simpel gezegd, wanneer ik een hover-effect op een element in de React-app nodig heb, maak ik eerst een klasse in mijn CSS-bestand en voeg ik vervolgens de gemaakte klasse toe aan de className van het element. De stappen die ik volg zijn:

1. Maak een CSS-bestand tenzij u index.css

   heeft

2. Maak een klas met een hoverpseudo-klasse ingeschakeld

   .hover__effect:hover {}

3. Voeg de gewenste effecten toe

   .hover__effect:hover {
   achtergrondkleur: rgb(255, 255, 255);
   kleur: rgb(0, 0, 0);
   }

4. Voeg vervolgens het hover__effecttoe aan de klasse-component die anders zou moeten zijn als de muisaanwijzer erover beweegt

   Hover

Controleer mijn sandboxvoor een live demo.