Javascript ClickAwayListener正在禁用嵌套组件中的onClick

我遇到一个问题，clickAwayListener材质ui组件在嵌套组件上的一个按钮中禁用onClick事件

当我删除ClickAwayListener时，一切都正常工作，但当它在那里时，它会禁用onClick

当前，handledelete函数删除页面上的指定区域

应该注意的是，DeleteArea组件是位于对话框中的对话框。它询问用户是否确定要删除指定区域

另外，handleClear正在改变状态，我认为这与此有关，因为我尝试将其更改为控制台日志，并且在未调用handleClear时它可以正常工作

<ClickAwayListener onClickAway={handleClear}>
  <CustomForm />
</ClickAwayListener>


in CustomForm:
<...>
  <DeleteArea onClick={handleDelete()}>
</...>

以定制形式：

---

我试图做到的是让用户能够点击，但也让删除按钮正常工作。

我刚刚遇到了同样的问题。似乎在其子级的

onClick

处理程序之前调用了

onClick

处理程序

在我的例子中，单击“离开”会更改状态，使其某些子级不会被渲染。onClick被破坏的子项就是其中之一，并且在react门户中呈现，因此单击此子项时会触发

onClickAway

。这意味着在子对象触发其

onClick

处理程序时，子对象将不再被渲染

我不喜欢这种解决方法，但将

onClickAway

处理程序包装在

setTimeout

（0ms）中解决了这个问题

例如：

<ClickAwayListener onClickAway={() => setTimeout(onDelete)}>
...

setTimeout（onDelete）}>
...

---

我知道这个问题有点老了，我不确定它是否解决了你的问题，但我想它可能会帮助遇到这个问题的人。

它不应该是

onClick={handleDelete}

不是

onClick={handleDelete（）}

？是的，你是对的，我解决了，但它仍然不起作用。