フックを使用してコンポーネントの外側のクリックを検出React
ユーザーが要素の外側をクリックすると非表示にできるという動作をアプリ全体で再利用していることがわかりました。
フックの導入により、これをフックに入れてコンポーネント間で共有し、すべてのコンポーネントで同じロジックを作成する手間を省くことができますか？
私はそれを次のようにコンポーネントに一度実装しました。
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>
);
}
さて、これに少し苦労した後、私は次の回避策に来ました。ポール・フィッツジェラルドがしたことに加えて、私の答えには遷移も含まれていることを考慮に入れています
まず、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フック：
//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
