reactjs에서 hover 상태에 액세스하려면 어떻게해야합니까?

나는 많은 농구 팀과 함께 사이드 네비게이션을 가지고 있습니다. 그래서 팀 중 하나를 가리키면 각 팀마다 다른 것을 표시하고 싶습니다. 또한 Reactjs를 사용하고 있으므로 변수가 있으면 다른 구성 요소에 전달할 수 있습니다.

React 구성 요소는 최상위 인터페이스에서 모든 표준 Javascript 마우스 이벤트를 노출합니다. 물론 :hoverCSS에서 여전히 사용할 수 있으며 일부 요구 사항에 적합 할 수 있지만 마우스 오버로 트리거되는 고급 동작의 경우 Javascript를 사용해야합니다. 따라서 마우스 오버 상호 작용을 관리하려면 onMouseEnter및 을 사용하는 것이 좋습니다 onMouseLeave. 그런 다음 구성 요소의 핸들러에 다음과 같이 연결합니다.

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

그런 다음 상태 / 소품의 일부 조합을 사용하여 변경된 상태 또는 속성을 자식 React 구성 요소에 전달합니다.

ReactJs는 마우스 이벤트에 대해 다음과 같은 합성 이벤트를 정의합니다.

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

보시다시피 브라우저는 기본적으로 호버 이벤트를 정의하지 않기 때문에 호버 이벤트가 없습니다.

호버 동작을 위해 onMouseEnter 및 onMouseLeave에 대한 핸들러를 추가 할 수 있습니다.

ReactJS 문서-이벤트

내가 허용 대답은 잘 알고 있지만, 누군가를 위해 당신이 사용할 수있는 느낌 같은 호버 찾고있는 사람 setTimeout에 mouseover와 (의 setTimeout 처리 할 수있는하자의 말리스트 ID의)지도에 핸들을 저장합니다. 에서 mouseover의 setTimeout에서 핸들을 지우고지도에서 삭제

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

그리고 다음과 같이지도를 구현합니다.

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

그리고지도는 그렇습니다.

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

내가 좋아 onMouseOver하고 onMouseOut그것은 또한 모든 아이들에게 적용되기 때문에 HTMLElement. 이것이 필요하지 않은 경우 onMouseEnter및 onMouseLeave각각을 사용할 수 있습니다 .

호버 효과를 얻으려면 간단히이 코드를 시도해 볼 수 있습니다.

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

또는 useState () 후크를 사용하여이 상황을 처리하려면이 코드를 시도해 볼 수 있습니다.

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

위의 코드는 모두 호버 효과를 위해 작동하지만 첫 번째 절차는 작성하고 이해하기가 더 쉽습니다.