查阅文档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);
};