Jak możesz osiągnąć zdarzenie najechania lub aktywne zdarzenie w ReactJS, gdy wykonujesz stylizację w tekście?
Odkryłem, że podejście onMouseEnter, onMouseLeave jest błędne, więc mam nadzieję, że jest inny sposób, aby to zrobić.
W szczególności, jeśli szybko najedziesz kursorem na komponent, zarejestrowane zostanie tylko zdarzenie onMouseEnter. Element onMouseLeave nigdy nie jest uruchamiany, a zatem nie może zaktualizować stanu ... pozostawiając komponent tak, jakby był nadal najeżdżany. Zauważyłem to samo, jeśli spróbujesz naśladować pseudoklasę css „: active”. Jeśli klikniesz naprawdę szybko, zarejestruje się tylko zdarzenie onMouseDown. Zdarzenie onMouseUp zostanie zignorowane ... pozostawiając komponent wyglądający na aktywny.
Oto JSFiddle pokazujący problem: https://jsfiddle.net/y9swecyu/5/
Film przedstawiający JSFiddle z problemem: https://vid.me/ZJEO
Kod:
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')
)
źródło
Odpowiedzi:
Czy próbowałeś któregoś z nich?
onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
SyntheticEvent
wspomina również o następujących kwestiach:
React normalizuje zdarzenia, dzięki czemu mają one spójne właściwości w różnych przeglądarkach.
Poniższe programy obsługi zdarzeń są wyzwalane przez zdarzenie w fazie propagacji. Aby zarejestrować procedurę obsługi zdarzenia dla fazy przechwytywania, dołącz Capture do nazwy zdarzenia; na przykład zamiast używać onClick, można użyć onClickCapture do obsługi zdarzenia kliknięcia w fazie przechwytywania.
źródło
The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Poprzednie odpowiedzi są dość zagmatwane. Do rozwiązania tego problemu nie jest potrzebny stan reakcji ani żadna specjalna biblioteka zewnętrzna. Można to osiągnąć za pomocą czystego CSS / SASS:
Styl:
.hover { position: relative; &:hover &__no-hover { opacity: 0; } &:hover &__hover { opacity: 1; } &__hover { position: absolute; top: 0; opacity: 0; } &__no-hover { opacity: 1; } }
Komponent React
Prosta
Hover
funkcja czystego renderowania:const Hover = ({ onHover, children }) => ( <div className="hover"> <div className="hover__no-hover">{children}</div> <div className="hover__hover">{onHover}</div> </div> )
Stosowanie
Następnie użyj tego w ten sposób:
<Hover onHover={<div> Show this on hover </div>}> <div> Show on no hover </div> </Hover>
źródło
możesz używać
onMouseOver={this.onToggleOpen}
ionMouseOut={this.onToggleOpen}
rozmyślać nad komponentemźródło
Jeśli możesz stworzyć małe demo pokazujące błąd onMouseEnter / onMouseLeave lub onMouseDown / onMouseUp, warto by było wysłać je na stronę problemów lub listę mailingową ReactJS, aby zadać pytanie i posłuchać, co programiści mają na ten temat do powiedzenia.
W twoim przypadku wydaje się, że sugerujesz, że stany CSS: hover i: active byłyby wystarczające do twoich celów, więc sugeruję ich użycie. CSS jest o rząd wielkości szybszy i bardziej niezawodny niż Javascript, ponieważ jest bezpośrednio zaimplementowany w przeglądarce.
Jednak stanów: hover i: active nie można określać w stylach wbudowanych. To, co możesz zrobić, to przypisać elementom identyfikator lub nazwę klasy i zapisać style w arkuszu stylów, jeśli są one w pewnym stopniu stałe w aplikacji, lub w dynamicznie generowanym
<style>
znaczniku.Oto przykład drugiej techniki: https://jsfiddle.net/ors1vos9/
źródło
Proste
css
rozwiązanie.W przypadku stosowania podstawowych stylów CSS jest prostszy i wydajniejszy niż rozwiązania JS w 99% przypadków. (Chociaż bardziej nowoczesne rozwiązania CSS-in-JS - np. Komponenty React itp. - są prawdopodobnie łatwiejsze w utrzymaniu).
Uruchom ten fragment kodu, aby zobaczyć, jak działa…
.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>
źródło
more performant that JS solutions 99% of the time
nie prawda. przeczytaj artykuły obalające ten mit. czy masz jakieś źródło?Właśnie napotkałem ten sam problem podczas nasłuchiwania zdarzeń onMouseLeave na wyłączonym przycisku. Obejrzałem to, nasłuchując natywnego zdarzenia mouseleave na elemencie, który otacza wyłączony przycisk.
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> ); }
Oto skrzypce https://jsfiddle.net/qfLzkz5x/8/
źródło
onMouseLeave
-EventPakiet o nazwie
styled-components
może rozwiązać ten problem w ELEGANCKI sposób.Odniesienie
Przykład
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>
źródło
Nie możesz z samą stylizacją inline. Nie zalecamy ponownego wdrażania funkcji CSS w JavaScript. Mamy już język, który jest niezwykle potężny i niesamowicie szybki w tym przypadku - CSS. Więc użyj go! Made Style It, aby pomóc.
npm install style-it --save
Składnia funkcjonalna ( 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;
Składnia 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;
źródło
Użyj Radium !
Poniżej znajduje się przykład z ich witryny internetowej:
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' } };
źródło
Używałbym onMouseOver i onMouseOut. Bo w reakcji
Tutaj jest w dokumentacji React dla zdarzeń myszy.
źródło
Miałem podobny problem, gdy wywołano onMouseEnter, ale czasami odpowiadające mu zdarzenie onMouseLeave nie zostało uruchomione, oto obejście, które działa dobrze dla mnie (częściowo opiera się na 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> ); } });
Zobacz na jsfiddle: http://jsfiddle.net/qtbr5cg6/1/
Dlaczego tak się stało (w moim przypadku): Po
$('#item').animate({ scrollTop: 0 })
kliknięciu elementu uruchamiam animację przewijania jQuery (przez ). Tak więc kursor nie opuszcza elementu „naturalnie”, ale podczas animacji sterowanej JavaScript… iw tym przypadku onMouseLeave nie został poprawnie uruchomiony przez React (React 15.3.0, Chrome 51, Desktop)źródło
Wiem, że minęło trochę czasu, odkąd zadano to pytanie, ale po prostu natknąłem się na ten sam problem niespójności z onMouseLeave (). niezawodny i działa za każdym razem, gdy go testuję. Widziałem wydarzenia tutaj w dokumentach: https://facebook.github.io/react/docs/events.html#mouse-events tutaj jest przykład z użyciem 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> ) }
źródło
Osobiście używam Style It do stylu inline w React lub przechowuję mój styl oddzielnie w CSS lub SASS ...
Ale jeśli naprawdę jesteś zainteresowany zrobieniem tego w trybie inline, spójrz na bibliotekę, poniżej przedstawiam niektóre z zastosowań:
W komponencie :
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;
Wyjście :
<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>
Możesz także użyć zmiennych JavaScript z najedź na kurs w swoim CSS, jak poniżej:
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;
A wynik jak poniżej:
<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>
źródło