如何使用 onClick 事件上的反应链接组件？

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

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

是这样做还是另一种方式？

300202 次浏览
小开
最佳答案

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

try

onClick={hello}
小开

你应该用这个:

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

我不认为这是一个普遍适用的好模式。Link 将运行您的 onClick 事件，然后导航到路由，因此导航到新路由会有一点延迟。一个更好的策略是像您已经做的那样，使用“ to”道具导航到新路由，并且在新组件的 Component entDidMount ()函数中，您可以激发您的 hello 函数或任何其他函数。它会给你同样的结果，但与一个更平稳的过渡之间的路线。

对于上下文，我注意到了这一点，当我用一个 onClick 事件更新我的 redux 存储时，就像你在这里看到的一样，在安装新路由的组件之前，它导致了 ~ .3秒的空白屏幕延迟。没有 API 的电话，所以我很惊讶延迟这么长时间。但是，如果您只是在控制台上记录“ hello”，那么延迟可能不会引起注意。

小开 
 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>
小开
  1. 链接用于对 onClick 事件作出反应 
    <a href="#" onClick={this.setActiveTab}>
...View Full List
</a>


setActiveTab = (e) => {
e.preventDefault();
console.log(e.target);
}
小开

小心使用该函数，在这种情况下您可以使用 避免编写 event，否则链接将无法工作。

小开

in ReactJs we have to use {} to use our Handlers use OnClick = {() = > hello ()}而不是 onClick = ‘ hello ()’

帮助文档 = > < a href = “ https://reactjs.org/docs/handle-events s.html”rel = “ nofollow norefrer”> https://reactjs.org/docs/handling-events.html


提交答案