React <a> onClick 处理程序被忽略 - Google 分析

Question

我对 React onClick 处理程序有疑问。尽管 e.preventDefaul()，这个 link 有时会触发完全重新加载。我有这个代码：

<a
                href={isInactive ? undefined : item.url}
                onClick={(e) => {
                    e.preventDefault();
                    return !isInactive ? this.props.onChange(item) : undefined;
                }}
            >
                Foo
            </a>

这个错误与 GTM 有某种联系，因为当我评论 GTM 脚本标签时一切正常。接下来的事情是，当我停止为 Chrome (https://chrome.google.com/webstore/detail/datalayer-checker/ffljdddodmkedhkcjhpmdajhjdbkogke) 使用数据层扩展时，一切也都正常。

您知道出现此问题的任何可能原因吗？

Answer 1

问题可能是由于来自您的点击处理程序的 return 值引起的。如果您不明确停止传播，点击事件将冒泡到所有父元素。如果您希望点击事件不传播到您的处理程序之外，您需要在您的点击处理函数中调用 e.stopPropagation() 或 return false。如果您不阻止 click 事件传播，定位元素将导航到 href 属性中指定的 URL，这将导致整个页面重新加载。

Here's an article that explains pretty concisely the difference between e.preventDefault() and return false. It also links to this article 更详细地解释了事件的处理方式。

React <a> onClick 处理程序被忽略 - Google 分析

React <a> onClick handler is ignored - Google analytics

javascript

dom-events

google-tag-manager

reactjs