Question

伙计，

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

class myComponent {

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

当用户单击此标签时，我想调用分析功能，如下所示：

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

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

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

使用

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

有更好的方法吗？因为一旦重定向发生，就会调用组件卸载，而且我不确定是否会调用onClick处理程序。我在想什么问题吗？

Answer 1

在锚标记上调用onClick没关系。要防止在单击锚标记时重定向，您只需调用event.preventDefault（）

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

Answer 2

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

<ul>
    <li id="settingscompany"><a id="showsettingscompany" href="#">Company settings</a></li>
    <li id="othersettings"><a id="showsettingsother" href="#">Other settings</a></li>
</ul>
<script>
      $( "#showsettingsother" ).click(function() {
           $('#settingscontent').load('othersettings.html'); 
      }
</script>

使用CSS对其应用相同的样式（如果快速修复，则使用内联CSS）：

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

然后在显示给我们的功能中更改页面：

.sub {
    cursor: pointer,
    color: blue
}

Answer 3

通过将href设置为“＃”或“ javascript：void（0）”来阻止页面刷新，onclick事件经常会滥用锚标记来创建伪按钮。

当复制/拖动链接，在新标签页/窗口中打开链接，添加书签以及JavaScript仍在下载，错误输出或被禁用时，这些值会导致意外行为。这还将不正确的语义传达给辅助技术（例如，屏幕阅读器）。在这种情况下，建议改用a。通常，您只应使用锚来使用正确的URL进行导航。

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

3 个答案: