W jaki sposób mogę uzyskać dostęp do stanu najechania w responsjs?


101

Mam sidenav z wieloma drużynami koszykówki. Dlatego chciałbym wyświetlić coś innego dla każdego zespołu, gdy jeden z nich jest najechany kursorem. Używam również Reactjs, więc gdybym mógł mieć zmienną, którą mógłbym przekazać do innego komponentu, byłby niesamowity.


Odpowiedzi:


160

Komponenty React ujawniają wszystkie standardowe zdarzenia myszy JavaScript w swoim interfejsie najwyższego poziomu. Oczywiście nadal możesz używać :hoverw swoim CSS i może to być wystarczające dla niektórych Twoich potrzeb, ale dla bardziej zaawansowanych zachowań wywoływanych przez najechanie kursorem będziesz musiał użyć JavaScript. Aby zarządzać interakcjami po najechaniu, będziesz chciał używać onMouseEnteri onMouseLeave. Następnie dołączasz je do programów obsługi w komponencie w następujący sposób:

<ReactComponent
    onMouseEnter={() => this.someHandler}
    onMouseLeave={() => this.someOtherHandler}
/>

Następnie użyjesz kombinacji stanów / właściwości, aby przekazać zmieniony stan lub właściwości swoim podrzędnym komponentom React.


ok, myślę, że to zadziała. pozwól mi to przetestować. także, jak mogę przekazać tę zmienną do innego / niepołączonego komponentu?
Nazwa użytkownika

1
To faktycznie staje się trudne, React nie zapewnia tego dokładnie. W architekturze aplikacji internetowej, która wpisuje się w wybraną globalną, nadrzędną metodologię komunikacji. Wiele osób wybrałoby rozwiązanie typu magistrala zdarzeń, w którym jakiś globalny menedżer zdarzeń publikuje i odbiera zdarzenia w różnych komponentach. Te komunikaty o zdarzeniach zawierałyby dane, które chcesz przekazać jako argumenty. Oto, co sugeruje Facebook w swoich dokumentach na ten temat: facebook.github.io/react/tips/ ...
stolli

2
Jedną z rzeczy, które chcę dodać, onMouseEnter onMouseLeavesą zdarzenia DOM. Nie będą działać na niestandardowych ReactComponent, będziesz musiał przekazać wydarzenia jako rekwizyt i powiązać je z elementem DOM w taki sposób ReactComponent, jak<div onMouseOver={ () => this.props.onMouseOver }>
DAMIEN JIANG

30

ReactJs definiuje następujące zdarzenia syntetyczne dla zdarzeń myszy:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Jak widać, nie ma zdarzenia najechania kursorem, ponieważ przeglądarki nie definiują zdarzenia najechania natywnie.

Będziesz chciał dodać programy obsługi dla onMouseEnter i onMouseLeave dla zachowania po najechaniu.

ReactJS Docs - Wydarzenia


1

Wiem Zaakceptowanych odpowiedź jest wielki, ale dla każdego, kto szuka dla zawisu jak dotyk można wykorzystać setTimeoutna mouseoveri zapisać uchwyt w mapie (od powiedzmy lista identyfikatorów setTimeout handle). Na mouseoverwyczyścić uchwyt z setTimeout i usunąć go z mapy

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

I zaimplementuj mapę w następujący sposób:

onMouseOver(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = setTimeout(() => {
    scrollPreviewToComponentId(listId);
  }, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
  this.hoverHandleMap[listId] = handle;
}

onMouseOut(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = this.hoverHandleMap[listId];
  clearTimeout(handle);
  delete this.hoverHandleMap[listId];
}

Mapa jest taka,

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

Wolę onMouseOveri onMouseOutponieważ dotyczy to również wszystkich dzieci w HTMLElement. Jeśli nie jest to wymagane, możesz użyć odpowiednio onMouseEnteri onMouseLeave.


0

Aby uzyskać efekt najechania, możesz po prostu wypróbować ten kod

import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

Lub jeśli chcesz poradzić sobie z tą sytuacją za pomocą hooka useState (), możesz wypróbować ten fragment kodu

import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

Oba powyższy kod będzie działał z efektem najechania, ale pierwsza procedura jest łatwiejsza do napisania i zrozumienia

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.