我遇到了一个问题，即 clickAwayListener material-ui 组件在我的嵌套组件上的一个按钮中禁用了 onClick 事件。
当我删除 ClickAwayListener 时一切正常，但当它存在时它会禁用 onClick。
目前handle delete函数是删除页面的指定区域。
需要注意的是，DeleteArea组件是一个位于对话框中的对话框。它会询问用户是否确定要删除指定区域。
handleClear 也在改变状态，我认为这与它有关，因为我尝试将它更改为控制台日志，并且在未调用 handleClear 时它可以正常工作。
<ClickAwayListener onClickAway={handleClear}>
<CustomForm />
</ClickAwayListener>
in CustomForm:
<...>
<DeleteArea onClick={handleDelete()}>
</...>
我想要完成的是让用户能够点击离开，同时让删除按钮正常工作。
最佳答案
我刚遇到同样的事情。似乎 onClickAway 处理程序在其子级的 onClick 处理程序之前被调用。
在我的例子中，点击会改变状态，这样它的一些 child 就不会被渲染。 onClick 损坏的 child 就是其中之一，并在 react 门户中呈现，因此 onClickAway 在单击此 child 时被触发。这意味着在触发其 onClick 处理程序时，子项将不再呈现。
我不喜欢这种解决方法，但是将 onClickAway 处理程序包装在 setTimeout (0ms) 中为我解决了这个问题。
一个例子:
<ClickAwayListener onClickAway={() => setTimeout(onDelete)}>
...
我知道这个问题有点老了，我不确定它是否能解决您的问题，但我认为它可能会帮助遇到此问题的人。
关于javascript - ClickAwayListener 在嵌套组件中禁用 onClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57894097/