Wie schwebt du in ReactJS? - onMouseLeave wurde nicht während des schnellen Mauszeigers registriert

Den vorherigen Antworten sind ziemlich verwirrend. Sie brauchen nicht zu reagieren-Zustand zu lösen, noch irgendwelche speziellen externen lib. Es kann erreicht werden mit reinem css/sass:

Stil:

.hover {
  position: relative;

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

  &:hover &__hover {
    opacity: 1;
  }

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

  &__no-hover {
    opacity: 1;
  }
}

Das React-Komponente

Einem einfachen Hover Pure-Rendering-Funktion:

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

Nutzung

Dann verwenden Sie es wie diese:

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

InformationsquelleAutor der Antwort dreampulse

Ich habe gerade stieß in das gleiche problem beim hören für onMouseLeave Ereignisse auf eine deaktivierte Taste. Ich arbeitete um es durch das hören der Muttersprache mouseleave-Ereignis auf ein element umschließt, die deaktiviert Schaltfläche.

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

Hier ist ein Turnschuh https://jsfiddle.net/qfLzkz5x/8/

InformationsquelleAutor der Antwort Cory Danielson

Ich hatte ein ähnliches Problem beim onMouseEnter genannt wurde, aber manchmal sind die entsprechenden onMouseLeave event nicht gefeuert, hier ist ein workaround, das funktioniert gut für mich (teilweise basiert auf 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>
        );
    }
});

Finden Sie auf jsfiddle: http://jsfiddle.net/qtbr5cg6/1/

Warum war es passiert (in meinem Fall): ich bin mit einem jQuery-scrolling-animation (durch $('#item').animate({ scrollTop: 0 })), die beim Klick auf das Element. Damit der cursor nicht verlassen, das Element "natürlich", aber während eine JavaScript-gesteuerte animation ... und in diesem Fall die onMouseLeave wurde nicht ordnungsgemäß ausgelöst durch Reagieren (Reagieren 15.3.0, Chrom-51, Desktop)

InformationsquelleAutor der Antwort kunnix

Ich persönlich benutze Stil für inline-Stil in Reagieren oder halten mein Stil separat in einem CSS oder SASS Datei...

Aber wenn Sie wirklich interessiert sind, es zu tun inline, Blick auf die Bibliothek, Teile ich einige der Verwendungen unter:

In der Komponente:

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;

Ausgabe:

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

Auch Sie können JavaScript-Variablen mit hover in der CSS wie folgt :

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;

Und das Ergebnis wie folgt:

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

InformationsquelleAutor der Antwort Alireza