如何在反应链接组件上使用 onClick 事件？答案

【问题标题】：How to use onClick event on react Link component?如何在反应链接组件上使用 onClick 事件？
【发布时间】：2026-01-23 15:30:01
【问题描述】：

我正在使用 reactjs 路由器中的 Link 组件，但我无法让 onClickevent 正常工作。这是代码：

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

这是这样做的方式还是其他方式？

【问题讨论】：

标签： reactjs react-router react-redux

【解决方案1】：

您将hello() 作为字符串传递，hello() 表示立即执行hello。

试试

onClick={hello}

【讨论】：

【解决方案2】：

你应该使用这个：

<Link to={this.props.myroute} onClick={hello}>Here</Link>

或者（如果方法hello位于此类）：

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

更新：对于 ES6 和最新版本，如果你想用 click 方法绑定一些参数，你可以使用这个：

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>

【讨论】：

或者更好this.hello.bind(this)
^ 实际上，您应该始终在构造函数中绑定操作，因为您拥有的绑定方式可能会导致性能问题。
Link "to" 是必需的，但很多时候我只需要 onClick()，目前，我必须做类似<Link to="" onClick={this.delete}>Delete</Link> 的事情。我希望“to”在这里是可选的。
@newman 为什么不使用to 就使用Link？如果您不需要它，那么只需使用其他一些组件，例如带有 onClick 方法的 <button> 就可以了；）。
我在 React-Router 和 Link 上也没有完全出卖。有时它在那里是因为最后一个开发人员做了什么。我更喜欢通过 props 处理上下反应以控制工作流程。

【解决方案3】：

我不认为这是一个普遍使用的好模式。 Link 将运行您的 onClick 事件，然后导航到该路线，因此导航到新路线会有一点延迟。更好的策略是使用 'to' 道具导航到新路线，就像您所做的那样，在新组件的 componentDidMount() 函数中，您可以触发 hello 函数或任何其他函数。它将为您提供相同的结果，但路线之间的过渡更加顺畅。

对于上下文，我在使用 Link 上的 onClick 事件更新我的 redux 存储时注意到了这一点，就像你在这里一样，它在安装新路由的组件之前导致了大约 3 秒的空白-白屏延迟。没有涉及 api 调用，所以我很惊讶延迟如此之大。但是，如果您只是在控制台记录“你好”，则延迟可能不会很明显。

【讨论】：

我在当前组件中有一个回调 url，在转换到新路由之前，我将其保存在 onClick 的 cookie 中。我不会在下一个组件中获得那个回调 url，所以我需要在转换之前这样做。你有什么替代方案吗？ PS：即使刷新后，回调网址也应该可以访问，因此可以将其保存在商店中。
如果你使用 react-navigation：我会说不要使用 Link，只需使用 TouchableOpacity 或 TouchableWithoutFeedback，然后在你的 onPress 函数中你可以导航并将你的 url 作为导航参数传递 @987654322 @ 如果你不使用 react-navigation 我只会使用 Link 的 onClick 并且不用担心轻微的性能问题。它可能不会引起注意。
好建议！谢谢！

【解决方案4】：

 const onLinkClick = (e) => {
    e.preventDefault();
    ---do your stuff---
    history.push('/your-route');
};

<a href='/your-route' onClick={onLinkClick}> Navigate </a>
                   or
<Link to='/your-route' onClick={onLinkClick}> Navigate </Link>

【讨论】：

真的有必要给每个元素加上onClick={onLinkClick}吗？您可以不按类型定位Link 对象吗，就像使用 jQuery 使用选择器并“全局”添加事件一样？
@AdamHey 你的意思是事件委托。显然，由于 React 的优化，没有明显的性能优势。 dev.to/thawsitt/should-i-use-event-delegation-in-react-nl0
感谢@manafire 的链接。我并没有真正从性能方面考虑，而是从可管理性的角度考虑。如果您可以编写一个针对所有所需元素的委托，那么您不需要在每个元素上添加onClick
历史从何而来？