思路

typescript
复制代码
/*
 * @Descripttion: 针对于echarts tooltip的点击事件自定义hooks
 * @version: 
 * @Author: WangPeng
 * @Date: 2023-03-01 15:54:14
 * @LastEditors: WangPeng
 * @LastEditTime: 2023-03-01 16:12:44
 */
import React, { useEffect } from 'react';
import { strToObject } from '../utils'


type Props = {
    clickFunc?: (v: any) => any  // 当点击的时候触发的回调函数，抛出点击图表的一些参数
    className: string   // 需要匹配的类名，比如自定义img的需要添加点击事件 为img添加一个独立的className
}


const useDocumentClick = (props: Props) => {
    const { clickFunc, className } = props;
    const clickDom = (e) => {
        const { srcElement } = e;
        if (srcElement?.className === className) {
            const obj = strToObject(e.target.alt);
            clickFunc && clickFunc(obj)
        }
    }
    useEffect(() => {
        document.body.addEventListener('click', clickDom)
        return () => {
            document.body.removeEventListener('click', clickDom)
        }
    }, [])
    return {


    };
};


export default useDocumentClick;

使用

javascript
复制代码
useDocumentClick({
  clickFunc: (v) => {
    setOpen(true)
  },
  className: 'echarts-click'
})