React中实现类似v-click-outside效果

React中实现类似v-click-outside效果

• 问题背景

  • 有时候我们需要点击某个下拉框等元素、组件的外部关闭下拉框。

• 解决方法

  • 使用window.addEventListener监听整个页面

    const [elVisible,setElVisible] = useState(false)
    const handle = (event) => {
      if(!el.current?.contains(event.target) && elVisible)
        {
          setElVisible(false)
        }
    };
    window.addEventListener('click',handle)
    

    在上面的handle函数中，我们判断了点击事件的原始目标是否是el元素或el元素的子元素。

  • 使用useEffect模拟componentDidMounted和componentBeforeUnmount

    useEffect(() => {
      const [elVisible,setElVisible] = useState(false)
    	const handle = (event) => {
        if(!el.current?.contains(event.target) && elVisible)
          {
            setElVisible(false)
          }
    	};
    	window.addEventListener('click',handle)
      return () => window.removeListener('click',handle)
    })
    

    借助useEffect的副作用函数将在组件挂载之后执行的性质模拟componentDidMounted，并且副作用函数的return将在组件销毁前执行，这样我们可以用于销毁监听器，避免内存泄漏。