Question

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

我在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，这似乎完全是笑了……但是我在console.log上添加了onMouseEnter，它肯定会在何时触发我是第一次点击，而不是随后的点击。

编辑2：

但是，mouseEnter只能在Firefox中发生，而不会在Chrome中发生。但是，这两种浏览器中的第一次单击均无法正常工作。

编辑3：

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

此外，仔细检查并确认我似乎在这个问题的常见来源均未使用stopPropagation。

Answer 1

我遇到了同样的问题，在您的 onClick 函数中，您必须保留您的事件。

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

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

Answer 2

想通了！

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

要显示有问题的按钮，我用div单击了onBlur中的内容。这给了它重点。当我第一次在外部单击出现的按钮时，它触发了blur。

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

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

从而结束了数小时的痛苦调试。

Answer 3

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

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

3 个答案: