반응에서 범위 외부의 클릭 감지

특정 컨텍스트 외부에서 클릭을 감지하는 것은 모달 및 드롭다운 서랍과 같은 부동 구성 요소를 해제하는 것과 같은 작업을 수행하는 데 종종 필요합니다. 반응에서는 간단한 사용자 정의 후크를 사용하여 이러한 유연성을 쉽게 얻을 수 있습니다.

이 자습서에는 눌렀을 때 모달을 트리거하는 버튼이 있으며 범위 외부에서 클릭이 발생할 때 모달을 닫으려고 합니다.

여기서 트릭은 세 개의 매개변수를 사용하는 사용자 정의 후크를 정의하는 것입니다.

작동할 요소를 참조하는 ref입니다. 이 경우에는 모달입니다.

수행할 작업을 나타내는 콜백 함수입니다.

토글할 상태 변수입니다.

후크 내부에서 클릭 이벤트가 발생하기를 기다리고 발생하면 클릭 영역이 지정된 참조 범위 내에 포함되어 있는지 확인하고 그렇지 않은 경우 콜백 함수가 호출됩니다.
골격은 이렇습니다.

const customHook = (ref, callback, state) => {
  document.listenFor('click', e => {
    if ( !ref.contains(e.target) && state ) {
      callback()
    }
  }
}

그러나 작업 조각은 다음과 같이 보일 수 있습니다.

  const [open, setOpen] = useState(false)
  const modalRef = createRef(null)

  const useOutsideClick = (ref, callback, when) => {
    const savedCallback = useRef(callback)
    useEffect(() => {
      savedCallback.current = callback
    })
    const handler = e => {
      if (ref.current && !ref.current.contains(e.target)) {
        setOpen(false)
        savedCallback.current()
      }
    }
    useEffect(() => {
      if (when) {
          document.addEventListener('click', handler)
          return () => {document.removeEventListener('click', handler)}
      }
    }, [when])
  }

  useOutsideClick(modalRef, () => {setOpen(false)}, open)

Here's a link to the sandbox.