reactj의 호버 상태에 액세스하려면 어떻게 해야 합니까?

reactj의 호버 상태에 액세스하려면 어떻게 해야 합니까?

나는 농구팀들이랑 사이드나브가 있어.그래서 저는 팀들 중 한 팀만 맴돌고 있을 때 팀별로 다른 것을 보여주고 싶습니다.또, Reactjs를 사용하고 있기 때문에, 다른 컴포넌트에 전달할 수 있는 변수가 있으면 좋을 것 같습니다.

리액트 컴포넌트는 표준 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 문서 - 이벤트

호버 효과를 얻으려면 이 코드를 사용해 보십시오.

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

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

인정받는 답변이 훌륭하다는 것을 알지만 호버와 같은 호버를 찾고 있는 사람은 누구나 사용할 수 있습니다.setTimeout에mouseover(예를 들어 리스트 ID를 set Timeout Handle로 하겠습니다)에 핸들을 맵에 저장합니다.- 그래, 아니에요! - 왜요?mouseoverset Timeout에서 핸들을 클리어하고 맵에서 삭제합니다.

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각각 다음과 같다.

변수를 원했기 때문에 OP에서는 동작하지 않지만 UI 호버 효과만 원하는 사용자에게는 보통 CSS를 사용하는 것이 더 쉽습니다.

다음 예제에서는 항목이 위에 있을 때 삭제 버튼을 표시합니다.

<div className="revealer">
  <div>
    {itemName}
  </div>
  <div className="hidden">
    <Btn label="Delete"/>
  </div>
</div>


.hidden {
  display: none;
}

.revealer:hover .hidden {
  display: block;
}

부모 div에는revealer수업시간이야. 그 시간이 지나면, 그 시간 안에hiddendiv.는 div 내부에 . 디브

상기 STOLLI 및 BentOnCoding에서 제안한 이벤트를 사용하여 자체 컴포넌트 로직을 구현하거나 react-hover라는 모듈을 사용할 수 있습니다.

다른 컴포넌트에 전달할 수 있는 변수가 있다면 정말 좋을 것 같습니다.

다른 컴포넌트를 간단하게 랩할 수 있습니다.

 <ReactHover options={optionsCursorTrueWithMargin}>
  <Trigger type="trigger">
    <TriggerComponent />
  </Trigger>
  <Hover type="hover">
    <HoverComponent />
  </Hover>
</ReactHover>

또는 플레인 HTML:

<ReactHover options={optionsCursorTrueWithMargin}>
  <Trigger type="trigger">
    <h1 style={{ background: '#abbcf1', width: '200px' }}> Hover on me </h1>
  </Trigger>
  <Hover type="hover">
    <h1> I am hover HTML </h1>
  </Hover>
</ReactHover>

데모 코드 여기: 데모

useState를 사용하여

import React, { useState } from "react";

function App() {
  const [ishover,sethover]=useState(false);

  function MouseOver() {
    sethover(true);
  }
  function MouseOut() {
    sethover(false);
  }
  return (
    <div>
      <button
      style={{backgroundColor: ishover?"black":null}}
        onMouseOver={MouseOver}
        onMouseOut={MouseOut}
        onClick={handleClick}
      >
        Submit
      </button>
    </div>
  );
}

export default App;

아래 코드를 구현해 볼 수 있습니다.호버 기능은 툴팁으로 이용할 수 있습니다.자세한 내용은 아래 코드와 링크를 참조하십시오.https://mui.com/material-ui/react-tooltip/

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
    return (
    <Tooltip title="Delete">
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
    );
    }

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