单击React JS中的链接时调用函数

Question

我正在使用react属性而不是标签。所以我需要做的是在链接单击时调用一个函数，我应该遵循什么方法来实现这一目标。我可以使用以下函数吗？

<Link to={`/testimonial/${post.id}`} className="red">
  <span onClick={this.saveData(post.title)}>More</span>
</Link>

我必须触发该功能，该功能会将数据保存到localStorage，然后将用户重定向到该组件。

谢谢。

Answer 1

是的。您可以在<Link />中使用事件处理程序。或者，如果您想拥有更多控制权，甚至可以将事件处理程序绑定在子元素或父元素中。两者都是连续的：

<Link to={`/component/${post.id}`}/>
  <span onClick={this.saveDataToLocalStorage}>More</span>
</Link>

或者，您可以避免使用<Link />并根据需要使用normal元素：

<span onClick={this.saveDataToLocalStorage(post.id)}>More</span>

在函数内部，您可以重定向到路径：

saveDataToLocalStorage(postId) {
this.props.history.push(`/component/${postId}`)

这样，您将拥有更多控制权，可以登录，警报等，以及何时希望重定向到页面。