javascript - 可以在 ReactJS 中的 anchor 标记上调用 onClick 吗

Question

各位，

我的组件中有一个 anchor 标记，如下所示:

class myComponent {

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

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

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

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

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

与

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

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

Answer 1

您应该创建自己的元素，例如:

<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';
}