Como posso acessar um estado hover em reactjs?


99

Tenho um sidenav com vários times de basquete. Portanto, gostaria de mostrar algo diferente para cada equipe quando um deles está sendo pairado. Além disso, estou usando Reactjs, então se eu pudesse ter uma variável que pudesse passar para outro componente, seria incrível.


Respostas:


158

Os componentes React expõem todos os eventos de mouse Javascript padrão em sua interface de nível superior. Claro, você ainda pode usar :hoverem seu CSS, e isso pode ser adequado para algumas de suas necessidades, mas para os comportamentos mais avançados acionados por um passar do mouse você precisará usar o Javascript. Portanto, para gerenciar as interações de foco, você vai querer usar onMouseEntere onMouseLeave. Em seguida, você os anexa aos manipuladores em seu componente da seguinte forma:

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

Em seguida, você usará alguma combinação de estado / props para passar o estado alterado ou as propriedades aos componentes do React filho.


ok, acho que vai funcionar. deixe-me testar. Além disso, como posso passar essa variável para um componente diferente / não conectado?
Nome de usuário de

1
Isso fica realmente complicado, o React não fornece exatamente isso. Na arquitetura de um aplicativo da web, isso entra na metodologia de comunicação global e abrangente escolhida. Muitas pessoas escolheriam uma solução do tipo barramento de eventos, em que algum gerente global de eventos publica e recebe eventos em componentes distintos. Essas mensagens de evento conteriam os dados que você deseja passar como argumentos. Isso é o que o Facebook sugere em seus documentos sobre o assunto: facebook.github.io/react/tips/…
stolli

2
Uma coisa que quero acrescentar é que onMouseEnter onMouseLeavesão eventos DOM. Eles não funcionarão em um personalizado ReactComponent, você precisará transmitir os eventos como um suporte e vincular esses eventos a um elemento DOM ReactComponent, como<div onMouseOver={ () => this.props.onMouseOver }>
DAMIEN JIANG

30

ReactJs define os seguintes eventos sintéticos para eventos de mouse:

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

Como você pode ver, não há evento de foco, porque os navegadores não definem um evento de foco nativamente.

Você desejará adicionar manipuladores para onMouseEnter e onMouseLeave para comportamento de foco.

ReactJS Docs - Eventos


1

Eu sei a resposta aceita é grande, mas para quem está à procura de um hover como a sensação que você pode usar setTimeoutem mouseovere salvar o punho em um mapa (de, digamos lista ids deixou-nos para setTimeout Handle). Em mouseoverlimpar o identificador de setTimeout e excluí-lo do mapa

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

E implemente o mapa da seguinte maneira:

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

E o mapa é assim,

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

Eu prefiro onMouseOvere onMouseOutporque também se aplica a todas as crianças do HTMLElement. Se isso não for necessário, você pode usar onMouseEntere onMouseLeaverespectivamente.


0

Para ter efeito de foco, você pode simplesmente tentar este código

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

Ou se você quiser lidar com essa situação usando o gancho useState (), você pode tentar este trecho de código

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

Ambos os códigos acima funcionarão para efeito de foco, mas o primeiro procedimento é mais fácil de escrever e entender

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.