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

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 문서-이벤트

참고 URL : https://stackoverflow.com/questions/32125708/how-can-i-access-a-hover-state-in-reactjs