javascript - Hur svävar man i ReactJS? - onMouseLeave registreras inte vid snabb svävning över

Hur kan du uppnå antingen ett hover-event eller ett aktivt event i ReactJS när du använder inline-styling?

Jag har upptäckt att onMouseEnter- och onMouseLeave-metoden är buggig, så jag hoppas att det finns ett annat sätt att göra det på.

Specifikt, om du för muspekaren över en komponent mycket snabbt, registreras endast onMouseEnter-händelsen. OnMouseLeave utlöses aldrig och kan därför inte uppdatera tillståndet... vilket får komponenten att se ut som om den fortfarande hovras över. Jag har märkt samma sak om du försöker efterlikna ":active" CSS-pseudoklassen. Om du klickar väldigt snabbt registreras endast onMouseDown-händelsen. OnMouseUp-händelsen ignoreras... vilket får komponenten att se aktiv ut.

Här är en JSFiddle som visar problemet: https://jsfiddle.net/y9swecyu/5/

Koden:

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

Svar #1

Har du provat någon av de här?

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

det nämner också följande:

React normaliserar händelser så att de har konsekventa egenskaper över olika webbläsare.

Nedanstående händelsehanterare triggas av en händelse i bubblande fas. För att registrera en händelsehanterare för fångstfasen, lägg till Capture till händelsens namn; till exempel, istället för att använda onClick, skulle du använda onClickCapture för att hantera klickhändelsen i fångstfasen.

Svar #2

De tidigare svaren är ganska förvirrande. Du behöver inte ett react-state för att lösa detta, inte heller något speciellt externt bibliotek. Det kan uppnås med ren CSS/Sass:

Stilen:

.hover {
  position: relative;

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

  &:hover &__hover {
    opacity: 1;
  }

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

  &__no-hover {
    opacity: 1;
  }
}

React-komponenten

En enkel Hover ren-renderingsfunktion:

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

Användning

Använd det sedan så här:

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

Svar #3

du kan använda onMouseOver={this.onToggleOpen} och onMouseOut={this.onToggleOpen} för att musa över och ut på komponenten

Svar #4

Observera: Detta svar var för en tidigare version av denna fråga där den som ställde frågan försökte använda JavaScript för att tillämpa css-stilar… vilket enkelt kan göras med CSS.

En enkel css-endast lösning.

För att använda grundläggande stilar är CSS enklare och mer presterande än JS-lösningar 99 % av tiden. (Även om mer moderna CSS-i-JS-lösningar - t.ex. React-komponenter osv - kan anses vara mer underhållbara.)

Kör denna kodsnutt för att se den i aktion…

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

Svar #5

Om du kan skapa en liten demonstration som visar buggen med onMouseEnter/onMouseLeave eller onMouseDown/onMouseUp, skulle det vara värt att posta den på ReactJS:s issues-sida eller mailinglista, bara för att väcka frågan och höra vad utvecklarna har att säga om det.

I ditt användningsfall verkar du antyda att CSS :hover- och :active-tillstånd skulle vara tillräckliga för dina ändamål, så jag föreslår att du använder dem. CSS är flera storleksordningar snabbare och mer pålitligt än Javascript, eftersom det är direkt implementerat i webbläsaren.

Men :hover- och :active-tillstånd kan inte specificeras i inline-stilar. Vad du kan göra är att tilldela ett ID eller ett klassnamn till dina element och skriva dina stilar antingen i ett stylesheet, om de är något konstanta i din applikation, eller i en dynamiskt genererad <style>-tagg.

Här är ett exempel på den senare tekniken: https://jsfiddle.net/ors1vos9/

Relaterade artiklar