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（0毫秒）中为我解决了这个问题。

一个例子：

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

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

ClickAwayListener禁用嵌套组件中的onClick

1 个答案: