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

Question

我遇到一个问题，其中clickAwayListener材质用户界面组件在嵌套组件上的一个按钮中禁用了onClick事件。

当我删除ClickAwayListener时，一切正常，但是当它存在时，它将禁用onClick。

当前，句柄删除功能将删除页面上的指定区域。

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

也handleClear正在改变状态，我认为这与状态有关，因为我尝试将其更改为控制台日志，并且在未调用handleClear的情况下也可以正常工作。

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


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

我要完成的工作是使用户能够单击并同时使删除按钮正常工作。

Answer 1

我只是碰到了同一件事。似乎onClickAway处理程序在其子级的onClick处理程序之前被调用。

在我的情况下，单击以更改状态，以使其某些子项不会被渲染。 onClick损坏的孩子就是其中之一，并且在反应门户中进行了渲染，因此在单击该孩子时会触发onClickAway。这意味着该子项将在触发其onClick处理程序时不再被渲染。

我不喜欢这种解决方法，但是将onClickAway处理程序包装在setTimeout（0ms）中为我解决了这个问题。

示例：

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

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