如何在react链接组件上使用onClick事件？

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>

Answer 3

我不相信这是一般使用的好模式.链接将运行您的onClick事件,然后导航到路线,因此导航到新路线会稍有延迟.更好的策略是使用'to'prop来导航到新路径,并且在新组件的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>