React组件实现点击其他任意处关闭

2020-12-20

基本原理是监听文档document点击事件，依据组件是否被点击，处理不同业务。

1.监听事件

	useEffect(() => {
		document.addEventListener('click', onClick);
		return () => {
			document.removeEventListener('click', onClick);
		}
	})

2. 判断组件点击

如果自定义组件结构简单，可直接在组件点击事件中阻止进一步冒泡，参考:

	const onClickComponent = (e) => {
		e.nativeEvent.stopImmediatePropagation();
	}

而结构复杂，包含多个子组件时，可判断document实际点击目标e.target，若归属自定义组件，则选择不关闭。

if (customComponent.contains(e.target)) return;
View Demo

技术