可以在 ReactJS 中的锚标记上调用 onClick

Question

伙计们，

我的组件中有一个锚标记，如下所示：

class myComponent {

    render () {
        return (
            <a href="/link/to/other/page">Link</a>
        );
    }
}

我想在用户点击此标签时调用分析函数，如下所示：

analytics.submitData({event: "page redirection"});

请注意，我没有设置状态或调用任何反应函数。 如果我只是在锚标签的 onClick 事件上调用一个函数可以吗？像这样的：

anchorClickHandler() {
    analytics.submitData({event: "page redirection"});
}

与

<a href="/link/to/other/page" onClick={this.anchorClickHandler.bind(this)}>Link</a>

有没有更好的方法来做到这一点？ 因为一旦发生重定向，组件卸载就会被调用，我不确定我的 onClick 处理程序是否会被调用。我是不是想错了？

Answer 1

您应该使用 span 创建自己的元素，例如：

<span className='sub' onClick={this.anchorClickHandler}>Link</span>

使用 CSS 对其应用相同的样式（或内联 CSS，如果这是一个快速修复）：

.sub {
    cursor: pointer,
    color: blue
}

然后在您向我们展示的功能中更改您的页面：

anchorClickHandler = event => {
    analytics.submitData({event: "page redirection"});
    // Navigate to /link/to/other/page
    window.location.href = '/link/to/other/page';
}

Answer 2

在锚标签上调用 onClick 是可以的。为了防止点击锚标签时重定向，你只需调用 event.preventDefault()

anchorClickHandler(event) {
    event.preventDefault()
    analytics.submitData({event: "page redirection"});
    window.location.href = event.target.getAttribute('href');
}

Answer 3

锚标签经常与 onclick 事件一起被滥用，通过将 href 设置为“#”或“javascript:void(0)”来防止页面刷新来创建伪按钮。

在复制/拖动链接、在新选项卡/窗口中打开链接、添加书签以及 JavaScript 仍在下载、出错或被禁用时，这些值会导致意外行为。这也会向辅助技术（例如屏幕阅读器）传达不正确的语义。在这些情况下，建议改用<button>。一般来说，您应该只使用锚点进行导航，并使用正确的 URL。