反应 onClick 不会在第一次点击时触发，第二次点击行为如预期

Question

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

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

该按钮具有onClick和:hoverCSS 效果。

该按钮是通过单击另一个div（在第一次单击时起作用）来加载的。

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

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

                    onClick={(e) => {

                        console.log("ONclicked! " + this.props.alt);

                        // e.stopPropagation();

                        // various callbacks

                    }}>

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

第一次单击时不会出现这些消息。

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

我见过的关于“第一次点击不起作用”的其他问题都是关于第一次点击时没有更新的状态。就我而言，我什至没有尝试更新状态，我似乎根本没有接到onClick电话。

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

编辑：

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

编辑2：

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

编辑3：

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

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

Answer 1

弄清楚了！在另一个相邻的 div 中，我有一个onBlur处理程序。在该处理程序中，我调用setState()了该组件（div在div未聚焦时隐藏另一个）。为了显示有问题的按钮，我点击div了onBlur. 这给了它焦点。当我在出现的按钮上第一次单击外部时，它触发了blur.显然，该setState()调用以某种方式干扰了点击，包括导致我描述的奇怪行为mouseEnter被重新触发。也许这setState导致了重绘，然后mouseEnter再次被解雇？也许快速重绘也会阻止onClick通过，即使mouseDown被解雇？（与事件排序有关？）我仍然不确定为什么会发生这种情况。但是在删除setState()呼叫后，第一次单击按钮按预期工作。从而结束了几个小时的痛苦调试。