reactjs-如何在React Link组件上使用onClick事件?

我正在使用reactjs路由器中的Link组件,但无法使onClickevent运行。 这是代码:

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

这是做这件事的方式还是另一种方式?

bier hier asked 2020-06-21T00:33:50Z
3个解决方案
88 votes

您正在将hello()作为字符串传递,并且hello()也意味着立即执行hello

尝试

onClick={hello}
CodinCat answered 2020-06-21T00:34:22Z
17 votes

您应该使用此:

<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>
Vitaliy Andrusishyn answered 2020-06-21T00:34:51Z
11 votes

我不认为这通常是一个好的模式。 链接将运行您的onClick事件,然后导航到该路线,因此导航到新路线会稍有延迟。 更好的策略是使用“ to”道具导航到新路线,并在新组件的componentDidMount()函数中触发hello函数或任何其他函数。 它会为您提供相同的结果,但路线之间的过渡要平滑得多。

对于上下文,我在使用链接上的onClick事件更新redux存储时注意到了这一点,这在安装新路由的组件之前造成了〜.3秒的白屏延迟。 没有涉及到api调用,所以我惊讶于延迟如此之大。 但是,如果您只是控制台记录“ hello”,则延迟可能不会很明显。

Nunchucks answered 2020-06-21T00:35:16Z
translate from https://stackoverflow.com:/questions/42800815/how-to-use-onclick-event-on-react-link-component