¿Cómo puedo acceder a un estado de desplazamiento en reactjs?


99

Tengo una navegación lateral con un montón de equipos de baloncesto. Así que me gustaría mostrar algo diferente para cada equipo cuando se pasa el cursor sobre uno de ellos. Además, estoy usando Reactjs, así que si pudiera tener una variable que pudiera pasar a otro componente, sería increíble.


Respuestas:


158

Los componentes de React exponen todos los eventos de mouse estándar de Javascript en su interfaz de nivel superior. Por supuesto, aún puede usarlo :hoveren su CSS, y eso puede ser adecuado para algunas de sus necesidades, pero para los comportamientos más avanzados activados por un desplazamiento, deberá usar Javascript. Entonces, para administrar las interacciones de desplazamiento, querrá usar onMouseEntery onMouseLeave. Luego, los adjunta a los controladores en su componente de la siguiente manera:

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

Luego, usará alguna combinación de estado / accesorios para pasar el estado o las propiedades modificadas a sus componentes secundarios de React.


bien, creo que funcionará. déjame probarlo. Además, ¿cómo puedo pasar esta variable a un componente diferente / no conectado?
Nombre de usuario

1
Eso en realidad se vuelve complicado, React no lo prevé exactamente. En la arquitectura de una aplicación web, eso se introduce en la metodología de comunicación global y global elegida. Mucha gente elegiría una solución de tipo bus de eventos, en la que algún administrador de eventos global publica y recibe eventos en componentes dispares. Estos mensajes de eventos contendrían los datos que desea pasar como argumentos. Esto es lo que Facebook sugiere en sus documentos sobre el tema: facebook.github.io/react/tips/…
stolli

2
Una cosa que quiero agregar es que onMouseEnter onMouseLeaveson eventos DOM. No funcionarán en una costumbre ReactComponent, deberá pasar los eventos como un accesorio y vincular estos eventos a un elemento DOM en eso ReactComponent, como<div onMouseOver={ () => this.props.onMouseOver }>
DAMIEN JIANG

30

ReactJs define los siguientes 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 puede ver, no hay ningún evento de desplazamiento, porque los navegadores no definen un evento de desplazamiento de forma nativa.

Querrá agregar controladores para onMouseEnter y onMouseLeave para el comportamiento de desplazamiento.

ReactJS Docs - Eventos


1

Sé que la respuesta aceptada es grande, pero para cualquier persona que esté buscando un vuelo estacionario como la sensación puede utilizar setTimeouten mouseovery guardar el mango en un mapa (de la lista de identificadores de digamos vamos a setTimeout Mango). Al mouseoverborrar el identificador de setTimeout y eliminarlo del mapa

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

E implemente el mapa de la siguiente manera:

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

Y el mapa es así

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

Yo prefiero onMouseOvery onMouseOutporque también se aplica a todos los niños del HTMLElement. Si no es necesario, puede utilizar onMouseEntery onMouseLeaverespectivamente.


0

Para tener efecto de desplazamiento, simplemente puede probar 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>
      );
    }

O si desea manejar esta situación usando useState () hook, puede probar este 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 códigos anteriores funcionarán para el efecto de desplazamiento, pero el primer procedimiento es más fácil de escribir y comprender

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.