react-hooks中判断当前点击对象是否属于某一组件。

react-hooks中判断当前点击对象是否属于某一组件。

在项目中遇到这种场景，开始是用点击事件的event.path属性去查找点击元素的父节点中是否有某一个class去进行校验的，后来发现在IE中，event.path并不兼容，于是找到了一下处理方案：

思路： 使用React-dom中的findDOMNode方法，先找到父组件，然后使用contains方法判断点击对象是否属于该组件。

直接上代码—

import { useRef, useEffect } from 'react';
import { findDOMNode } from 'react-dom';

const FaNode = () => {
  const refFa = useRef(null);
  const clickMe = ({ target }) => {
    // 查找父组件
    const faComponent = findDOMNode(refFa.current);

    if (faComponent) {
      const isChild = faComponent.contains(target);
      // true/false
      console.log(isChild)
    }
  }

  // test code
  // useEffect(() => {
  //   window.addEventListener('click', clickMe)
  // }, [])

  return (
    <div ref={refFa} style={{width: 300, height: 300, background: 'red'}}>
      <div onClick={clickMe} style={{width: 100, height: 100, background: 'green'}}>click me</div>
    </div>
  )
}

export default FaNode;