Question

我正在使用reactjs路由器的链接组件，我无法使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放在这个班级）：

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

Answer 3

我不相信这是一般使用的好模式。链接将运行您的onClick事件，然后导航到路线，因此导航到新路线会稍有延迟。更好的策略是使用'to'prop来导航到新路径，并且在新组件的componentDidMount（）函数中，您可以激活hello函数或任何其他函数。它会给你相同的结果，但路线之间的转换更平滑。

对于上下文，我注意到在使用链接上的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链接组件上使用onClick事件？

4 个答案: