反应 onClick 在第一次点击时不触发，第二次点击行为符合预期（简单的调试消息直到第二次点击才会出现）答案

【问题标题】：React onClick not firing on first click, second click behaves as expected (simple debug message doesn't appear until second click)反应 onClick 在第一次点击时不触发，第二次点击行为符合预期（简单的调试消息直到第二次点击才会出现）
【发布时间】：2021-05-12 23:52:29
【问题描述】：

我在某个时候引入了一个错误（实时版本没有这个问题），但一直无法弄清楚是什么原因造成的。

我在 React 中有一个按钮（它只是一个 div 和一个 onClick）。

按钮具有onClick 和:hover CSS 效果。

通过单击另一个div（在第一次单击时有效）来加载该按钮。

加载按钮（及其包装内容）后，按钮在第一次单击时不会执行任何操作。不做任何其他事情，再次点击让它正常工作。

目前我的onClick 中有一条调试消息，所以它看起来像这样

                    onClick={(e) => {
                        console.log("ONclicked! " + this.props.alt);
                        // e.stopPropagation();
                        // various callbacks
                    }}>

我在所有按钮的父级上也有类似的console.log 调试消息，一直到根 React 元素（即单击页面上的任何位置都会发出一条消息，除非单击第一次在此特定按钮上）。即使是根元素也不会在第一次点击时注册任何内容..

这些消息都不会在第一次点击时出现。

同样，不做任何其他事情，只需在同一个位置再单击一次，就会按预期触发 onClick。

我看到的其他关于“第一次点击不起作用”的问题都是关于第一次点击时状态没有更新的问题。在我的情况下，我什至没有尝试更新状态，我似乎根本没有得到onClick 的调用。

我已经查看了这个版本的所有提交，但仍然无法找出问题所在。关于什么会导致这种行为的任何想法？对我来说最奇怪的部分是第二次点击有效，而第一次似乎没有做任何事情。但是在第一次和第二次点击之间，状态/DOM 没有任何变化（因为第一次点击似乎根本没有注册）。我认为这排除了诸如错误配置的pointer-events CSS 规则之类的事情？

编辑：

经过进一步探索，似乎第一次点击实际上触发了onMouseEnter，这看起来很疯狂，哈哈……但我在onMouseEnter 中添加了一个console.log，它肯定会在我第一次点击时触发，而不是在随后的点击中。

编辑 2：

但是这个 mouseEnter 事情只发生在 Firefox 中，而不是 Chrome。但是在两个浏览器中都存在第一次单击不起作用的错误。

编辑 3：

onMouseDown 正常触发，但onClick 仍然只在第二次单击按钮时发生（此时onMouseDown 触发了两次）。

另外，仔细检查并确认我没有在任何地方使用stopPropagation，这似乎是这个问题的常见来源。

【问题讨论】：

您能否在代码沙盒或类似工具中创建一个小型 repo 以重现您的行为？
自您发表评论以来一直在尝试，但无法重现。我想如果我能够重现它，我可能能够自己修复它，我敢肯定这只是干扰点击的一些小东西。现在会继续尝试，因为它也是调试的好方法。
还是没有重现，但是我测试了更多，发现第一次点击因为某种原因触发了onMouseEnter...（后面的点击不会触发onMouseEnter）。跨度>
另一个发现，onMouseDown 正在正确触发。如果需要，我想我可以切换到那个。此外，整个代码库中没有使用event.stopPropagatiion()。
如果没有向我们提供重现（您已经说过您目前还不能这样做）或围绕引用元素的完整代码，我们只能进行推测。我的猜测是，您在某个地方有另一个侦听器第一次拦截了该事件。

标签： javascript html css reactjs

【解决方案1】：

想通了！

在另一个相邻的 div 中，我有一个 onBlur 处理程序。在那个处理程序中，我在组件上调用了setState()（当div 没有焦点时隐藏另一个div）。

为了显示有问题的按钮，我用onBlur 在div 中单击了一些内容。这使它成为焦点。当我第一次点击外面出现的按钮时，它触发了blur。

显然，setState() 调用以某种方式干扰了点击，包括导致我描述的 mouseEnter 被重新触发的奇怪行为。也许setState 导致重绘，然后导致mouseEnter 再次被解雇？也许即使mouseDown 被解雇，快速重绘也会阻止onClick 通过？（与事件排序有关？）我仍然不确定为什么会发生这种情况。

但删除setState() 调用后，第一次单击按钮按预期工作。

就这样结束了几个小时痛苦的调试。

【讨论】：

【解决方案2】：

我遇到了同样的问题，在你的 onClick 函数中你必须坚持你的事件。

 onClick={(e) => {
     e.persist();
     console.log("ONclicked! " + this.props.alt);
     // e.stopPropagation();
     // various callbacks
 }}>

有关该主题的更多说明，请参阅此链接：https://deepscan.io/docs/rules/react-missing-event-persist

【讨论】：

【解决方案3】：

如果您使用的是Intellij 或WebStorm，则在运行javascript debug 模式时会发生这种情况。

【讨论】：