自定义事件

查阅文档https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent发现可以使用CustomEvent自定义事件。下面基于react-hook实现一个自定义事件example。

export const CustomEventHookTest = () => {
  const evt = useMemo(() => {
    console.info("创建example--event");
    return createCustomEvent("example");
  }, []);
  const eventHandler = useCallback(
    e => console.info("CustomEvent-----", e),
    []
  );

  const [count, setCount] = useState(0);

  const div = useMemo(() => {
    console.info("创建div");
    const el = document.createElement("div");
    return el;
  }, []);

  div.onclick = () => {
    console.info("点击事件");
    div.dispatchEvent(evt); // 触发example事件
    setCount(count + 1);
  };

  useEffect(() => {
    div.addEventListener("example", eventHandler);
    document.getElementById("view").appendChild(div);
    return () => {
      console.info("移除example事件-----");
      document.getElementById("view").removeChild(div);
    };
  }, [div, eventHandler]);

  console.info("CustomEvent-----", { count });
  return ReactDom.createPortal(<p>example事件----clicked-{count}</p>, div);
};