使用钩子检测 React 组件外部的点击

Question

我发现我正在跨应用程序重复使用当用户在元素外部单击时我可以隐藏它的行为。

随着钩子的引入，我是否可以将这些东西放在钩子中并在组件之间共享以节省我在每个组件中编写相同逻辑的时间？

我在一个组件中实现过一次如下

const Dropdown = () => {
    const [isDropdownVisible, setIsDropdownVisible] = useState(false);   
    const wrapperRef = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsDropdownVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (
            wrapperRef.current &&
            !wrapperRef.current.contains(event.target as Node)
        ) {
            setIsDropdownVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return(
       <DropdownWrapper ref={wrapperRef}>
         <p>Dropdown</p>
       </DropdownWrapper>
    );
}

Answer 1

这是可能的。

您可以创建一个名为 useComponentVisible

的可重用挂钩

import { useState, useEffect, useRef } from 'react';

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsComponentVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (ref.current && !ref.current.contains(event.target as Node)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return { ref, isComponentVisible, setIsComponentVisible };
}

然后在您希望添加功能的组件中执行以下操作：

const DropDown = () => {

    const { ref, isComponentVisible } = useComponentVisible(true);

    return (
       <div ref={ref}>
          {isComponentVisible && (<p>Going into Hiding</p>)}
       </div>
    );

}

在此处查找 codesandbox 示例。

Answer 2

好吧，在为此苦苦挣扎了一会儿之后，除了 Paul Fitzgerald 所做的之外，我已经进入下一个工作范围，并且考虑到我的答案也包括转换

首先，我希望我的下拉菜单在 ESCAPE 键事件和鼠标点击外部时关闭。为了避免为每个事件创建一个 useEffect，我以辅助函数结束：

//useDocumentEvent.js

import { useEffect } from 'react'
export const useDocumentEvent = (events) => {
  useEffect(
    () => {
      events.forEach((event) => {
        document.addEventListener(event.type, event.callback)
      })
      return () =>
        events.forEach((event) => {
          document.removeEventListener(event.type, event.callback)
        })
    },
    [events]
  )
}

之后，使用带来所有所需功能的下拉挂钩：

//useDropdown.js

import { useCallback, useState, useRef } from 'react'
import { useDocumentEvent } from './useDocumentEvent'

/**
 * Functions which performs a click outside event listener
 * @param {*} initialState initialState of the dropdown
 * @param {*} onAfterClose some extra function call to do after closing dropdown
 */
export const useDropdown = (initialState = false, onAfterClose = null) => {
  const ref = useRef(null)
  const [isOpen, setIsOpen] = useState(initialState)

  const handleClickOutside = useCallback(
    (event) => {
      if (ref.current && ref.current.contains(event.target)) {
        return
      }
      setIsOpen(false)
      onAfterClose && onAfterClose()
    },
    [ref, onAfterClose]
  )

  const handleHideDropdown = useCallback(
    (event) => {
      if (event.key === 'Escape') {
        setIsOpen(false)
        onAfterClose && onAfterClose()
      }
    },
    [onAfterClose]
  )

  useDocumentEvent([
    { type: 'click', callback: handleClickOutside },
    { type: 'keydown', callback: handleHideDropdown },
  ])

  return [ref, isOpen, setIsOpen]
}

最后，使用这个（它有一些情感造型）：

//Dropdown.js
import React, { useState, useEffect } from 'react'
import styled from '@emotion/styled'

import { COLOR } from 'constants/styles'
import { useDropdown } from 'hooks/useDropdown'
import { Button } from 'components/Button'

const Dropdown = ({ children, closeText, openText, ...rest }) => {
  const [dropdownRef, isOpen, setIsOpen] = useDropdown()
  const [inner, setInner] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const timeout = 150
  useEffect(() => {
    if (isOpen) {
      setInner(true)
    } else {
      setDisabled(true)
      setTimeout(() => {
        setDisabled(false)
        setInner(false)
      }, timeout + 10)
    }
  }, [isOpen])
  return (
    <div style={{ position: 'relative' }} ref={dropdownRef}>
      <Button onClick={() => setIsOpen(!isOpen)} disabled={disabled}>
        {isOpen ? closeText || 'Close' : openText || 'Open'}
      </Button>
      <DropdownContainer timeout={timeout} isVisible={isOpen} {...rest}>
        {inner && children}
      </DropdownContainer>
    </div>
  )
}

const DropdownContainer = styled.div(
  {
    position: 'absolute',
    backgroundColor: COLOR.light,
    color: COLOR.dark,
    borderRadius: '2px',
    width: 400,
    boxShadow: '0px 0px 2px 0px rgba(0,0,0,0.5)',
    zIndex: 1,
    overflow: 'hidden',
    right: 0,
  },
  (props) => ({
    transition: props.isVisible
      ? `all 700ms ease-in-out`
      : `all ${props.timeout}ms ease-in-out`,
    maxHeight: props.isVisible ? props.maxHeight || 300 : 0,
  })
)

export { Dropdown }

并且，要使用它，只需：

//.... your code
<Dropdown>
  <Whatever.Needs.To.Be.Rendered />
</Dropdown>
//... more code

此解决方案的来源是 here, this entry in medium and this article。

使用钩子检测 React 组件外部的点击

Detect click outside React component using hooks

javascript

reactjs

typescript

ecmascript-6

react-hooks