如何在 React Link 组件上使用 onClick 事件？

Question

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

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

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

Answer 1

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

尝试

onClick={hello}

Answer 2

你应该使用这个：

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

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

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

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

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

Answer 3

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

对于上下文，我在使用 Link 上的 onClick 事件更新我的 redux 存储时注意到了这一点，它在安装新路由之前导致了 ~.3 秒的空白屏幕延迟零件。没有涉及 api 调用，所以我很惊讶延迟这么大。但是，如果您只是控制台日志记录 'hello'，则延迟可能不会很明显。

Answer 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>

如何在 React Link 组件上使用 onClick 事件？

How to use onClick event on react Link component?

reactjs

react-router

react-redux