Material UI - 背景触发其子项的 onClick

Question

我正在使用 Material UI 背景，并希望在其中有一些微小的形式。但每当我点击它的孩子时，背景就会关闭，onClick这要归功于它应该切换背景。

\n\n

有什么方法可以阻止背景onClick从内部背景（它的孩子）触发？

\n\n

我尝试过useRef在内部使用元素，但对我来说，对元素有多个引用并在切换功能中检查它们（如果它应该隐藏背景）似乎很疯狂。另外，我无法访问背景内的某些元素；

\n\n

const handleBackdropToggle = e => {\n  console.log(e.currentTarget === backdropRef.current);\n  if (e.currentTarget === backdropRef.current) {\n    setOpen(!open);\n  }\n};\n\nconst handleToggle = e => {\n  setOpen(!open);\n};\n

\n\n

const handleBackdropToggle = e => {\n  console.log(e.currentTarget === backdropRef.current);\n  if (e.currentTarget === backdropRef.current) {\n    setOpen(!open);\n  }\n};\n\nconst handleToggle = e => {\n  setOpen(!open);\n};\n

\n

Answer 1

您可以使用Click away 侦听器，而不是通过onClick背景切换背景。

您可能遇到的主要问题是您需要停止表单中单击事件的传播。DOM 事件的本质是它们默认传播到所有祖先。您可以通过以下方式防止这种情况：

<div className={classes.form} onClick={e => e.stopPropagation()}>