如何在 Link: ReactJS 上使用 onClick 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48294737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use onClick event on Link: ReactJS?
提问by Pushkal Boganatham
In React router, I have toand onClickattributes as shown below
在路由器做出反应，我必须要和的onClick属性，如下图所示
<li key={i}><Link to="/about" onClick={() => props.selectName(name)}>{name}</Link></li>
state = {
selectedName: ''
};
selectName = (name) => {
setTimeout(function(){this.setState({selectedName:name});}.bind(this),1000);
// this.setState({selectedName: name});
}
- toattribute navigates to aboutRoute
- onClickassigns value to state variable selectedName which will be displayed when navigated to About page.
- 到属性导航到约路线
- onClick为状态变量 selectedName 赋值，当导航到 About 页面时将显示该变量。
When I give timeout insided function called on click, its navigating to new page and after sometime state is getting updated resulting in displaying previous name until state is updated with new name.
当我在单击时调用 timeout insided 函数时，它会导航到新页面，一段时间后状态会更新，导致显示以前的名称，直到状态用新名称更新。
Is there a way where it will navigate to the new route only after the code in onClick function gets executed.
有没有办法只有在 onClick 函数中的代码被执行后才能导航到新路线。
You can get the entire code [here].(https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js)
您可以在 [此处] 获取完整代码。（https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js）
采纳答案by Mayank Shukla
One possible way is, Instead of using Link, use history.pushto change the route dynamically. To achieve that remove the Linkcomponent and define the onClickevent on li. Now first perform all the task inside onClickfunction and at the end use history.pushto change the route means to navigate on other page.
一种可能的方法是，Link使用history.push动态更改路由，而不是使用。为了实现这一点，请移除Link组件并在onClick上定义事件li。现在首先执行onClick函数内部的所有任务，最后使用history.push更改路由的方式在其他页面上导航。
In your case change the router inside setStatecallback function to ensure that it will happen only after state change.
在您的情况下，更改路由器内部setState回调函数以确保它仅在状态更改后发生。
Write it like this:
像这样写：
<li key={i} onClick={() => props.selectName(name)}> {name} </li>
selectName = (name) => {
this.setState({ selectedName:name }, () => {
this.props.history.push('about');
});
}
Check this answers for:
检查以下答案：
回答by Rohan Varma
Alternatively, I would recommend using URL Params in order to capture the name of the person that the about page is about. Thus, instead of the url being /about and the name being behind the scenes, it would be /about/tom or /about/pushkal. The way that you do this is by defining params in the URL router as such in your index.js:
或者，我建议使用 URL Params 来捕获关于页面的人名。因此，URL 不是 /about 并且名称在幕后，而是 /about/tom 或 /about/pushkal。你这样做的方法是在你的 index.js 中定义 URL 路由器中的参数：
<Route path="/about/:name" component={AboutPage}>
Now, when you link to the about page, you would do it as such:
现在，当您链接到关于页面时，您可以这样做：
<Link to={"/about/" + name}>{name}</Link>
Now, in your AboutPage component, you can access the name param as a prop in this.props.params.name. You can look at more examples here.
现在，在你的 AboutPage 组件中，你可以访问 name param 作为this.props.params.name. 您可以在此处查看更多示例。
This method is a bit different than your current approach but I suspect it will lead to easier design later on
这种方法与你目前的方法有点不同，但我怀疑它会导致以后更容易设计
回答by Himanshu Katiyar
just wrap the content of Link inside div and give onClick listener to this div and its gonna work fine. e.g:
只需将 Link 的内容包装在 div 中，并为该 div 提供 onClick 侦听器，它就可以正常工作。例如：
<Link to="/about">
<div onClick={() => {yourfunction()}>About</div>
</Link>
