반응 - 마우스 버튼 길게 누르기 예제

안녕하세요! 👋😊

이 기사에서는 React에서 마우스 버튼을 누르고 유지하는 예를 보여드리고자 합니다. 🖱

시작하기 전에 웹 사이트에서 솔루션에 대한 실행 가능한 예제를 확인하는 것이 좋습니다.
React - mouse button press and hold example

처음에는 아쉽게도 React에서 마우스 버튼을 길게 누르는 이벤트가 없다는 점을 말씀드리고 싶었습니다. 😥
그러나 마우스 버튼을 누르고 있을 때 몇 가지 논리를 수행하는 방법과 버튼 누르기를 멈추거나 커서가 버튼 필드를 벗어날 때 이 논리를 중단하는 방법을 보여드리겠습니다.

최종 결과:


아래 예제는 0.1초마다 버튼을 누르고 있으면 증가하는 counter를 생성하는 방법을 보여줍니다. counter가 증가함에 따라 내 요소의 height 및 width도 증가합니다. 정확히 counter에 의존하기 때문입니다.

내가 사용한 예에서:

useState 후크 - counter를 App 구성 요소의 상태로 관리하기 위해,

useRef 후크 - 간격을 설정하고 지우는 데 도움이 되는 참조를 생성합니다.

onMouseDown 이벤트 - counter ,

증가를 시작합니다.

onMouseUp/onMouseLeave 이벤트 - counter ,

증가를 중지합니다.

useEffect 후크 - 앱 구성요소가 소멸될 때 counter를 중지합니다.

실제 예:

import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState(100);
  const intervalRef = React.useRef(null);

  React.useEffect(() => {
    return () => stopCounter(); // when App is unmounted we should stop counter
  }, []);

// styles --------------------------------------

  const containerStyle = {
    height: '300px',
    width: '300px',
  };

  const elementStyle = {
    margin: '5px',
    height: `${counter}px`,
    width: `${counter}px`,
    background: 'radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac)',
    border: '2px solid black',
    borderRadius: '50%',
    boxShadow: '10px 5px 5px #BEBEBE',
  };

// functions -----------------------------------

  const startCounter = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 10);
  };

  const stopCounter = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  return (
    <div style={containerStyle}>
      <div
        onMouseDown={startCounter}
        onMouseUp={stopCounter}
        onMouseLeave={stopCounter}
        style={elementStyle}
      />
    </div>
  );
};

export default App;

이 예제를 실행할 수 있습니다here.

이것이 React에서 마우스 누르기 및 유지 이벤트를 처리하는 제 버전입니다.
의견에 어떻게 생각하는지 알려주세요. 💬
더 나은 솔루션이 있습니까? 당신이 나와 공유한다면 기쁠 것입니다! 😊

시간 내주셔서 감사합니다. 다음 게시물에서 뵙겠습니다! 🔥

우리에게 쓰기! ✉

해결해야 할 문제가 있거나 React 또는 JavaScript 주제와 관련하여 아무도 대답할 수 없는 질문이 있거나 멘토링을 찾고 있는 경우 dirask.com -> Questions에 문의하십시오.

코딩 팁과 요령을 다른 사람들과 공유하는 당사facebook group에 가입할 수도 있습니다! 🔥