Reactjs'de bir fareyle üzerine gelme durumuna nasıl erişebilirim?

Bir grup basketbol takımım olan bir tarafım var. Bu yüzden, bir takımın üzerine gelindiğinde her takım için farklı bir şey göstermek istiyorum. Ayrıca, Reactjs kullanıyorum, böylece bir değişkenim olsaydı harika olacak başka bir bileşene geçebilirim.

React bileşenleri, tüm standart Javascript fare olaylarını üst düzey arayüzlerinde gösterir. Elbette :hoverCSS'nizde kullanmaya devam edebilirsiniz ve bu bazı ihtiyaçlarınız için yeterli olabilir, ancak bir fareyle tetiklenen daha gelişmiş davranışlar için Javascript kullanmanız gerekir. Dolayısıyla, üzerine gelme etkileşimlerini yönetmek için onMouseEnterve kullanmak isteyeceksiniz onMouseLeave. Daha sonra bunları bileşeninizdeki işleyicilere şu şekilde iliştirirsiniz:

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

Daha sonra değişen durum veya özellikleri alt React bileşenlerine geçirmek için bazı durum / props kombinasyonlarını kullanacaksınız.

ReactJs, fare olayları için aşağıdaki sentetik olayları tanımlar:

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

Gördüğünüz gibi fareyle üzerine gelme olayı yoktur, çünkü tarayıcılar yerel olarak bir fareyle üzerine gelme olayını tanımlamaz.

Fareyle üzerine gelme davranışı için onMouseEnter ve onMouseLeave için işleyiciler eklemek isteyeceksiniz.

ReactJS Docs - Etkinlikler

Ben kabul cevap harika ama herkes için kullanabileceğiniz hissi gibi üzerine gelindiğinde arayan kim setTimeoutüzerine mouseoverve (setTimeout Saplı için diyelim diyelim liste kimlikleri) bir harita kolu kaydedin. Açık mouseoversetTimeout gelen kolu temizlemek ve haritadan silin

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

Ve haritayı aşağıdaki gibi uygulayın:

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

Ve harita da öyle

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

Tercih ediyorum onMouseOverve onMouseOutçünkü içindeki tüm çocuklar için de geçerli HTMLElement. Bu gerekli değilse onMouseEnterve onMouseLeavesırasıyla kullanabilirsiniz .

Fareyle üzerine gelme efekti için bu kodu deneyebilirsiniz

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

Veya useState () kancasını kullanarak bu durumu halletmek istiyorsanız, bu kod parçasını deneyebilirsiniz.

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

Yukarıdaki kodların her ikisi de üzerine gelme efekti için çalışacaktır, ancak ilk prosedürün yazılması ve anlaşılması daha kolaydır