web-dev-qa-db-fra.com

Détecter cliquez sur l'extérieur React composant à l'aide de crochets

Je constate que je réutilise un comportement sur une application que lorsqu'un utilisateur clique à l'extérieur d'un élément, je peux le cacher.

Avec l'introduction de crochets, c'est ce que je pouvais mettre dans un crochet et partager des composants pour me sauver écrire la même logique dans chaque composant?

Je l'ai mis en œuvre une fois dans un composant comme suit.

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>
    );
}
javascriptreactjstypescriptecmascript-6react-hooks
11
peter flanagan

Eh bien, après avoir eu du mal cela pendant un peu, je suis arrivé à la prochaine workarron, en addition de ce que Paul Fitzgerald a fait et avoir en comptage que ma réponse inclut aussi des transitions.

Tout d'abord, je veux que ma liste déroulante soit fermée sur l'événement d'évacuation et la souris cliquez à l'extérieur. Pour éviter de créer un useFEffect par événement, j'ai terminé avec une fonction d'assistance:

//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]
  )
}

Après cela, HookDopdown crochet qui apporte toute la fonctionnalité souhaitée:

//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]
}

Enfin, pour utiliser ceci (il a un style d'émotion):

//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 }

Et, pour l'utiliser, simplement:

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

Final result of my use case

Les crédits à cette solution sont pour réponse précédente ici, cette entrée dans le support et cela article .

0
Tirias