我有一个要显示给用户的用户表。他们单击一行,然后我要导航到一个组件以显示详细信息。
<tbody>
{this.state.clients.map(client => (
<tr className="tableRow" onClick={() => this.handleSelection(client.id)}>
<td>{client.name}</td>
“我的路线”的设置如下:
<Route path="/client/:clientId" component={Client} />
因此,在该行中,我有一个onClick事件,该事件调用一个函数,并传递选定的参数。功能如下:
handleSelection(clientId) {
this.props.history.push(`/client/${clientId}`);
}
然后,在目标组件的构造函数中,我只是记录所选的ID,该ID将传递给api以加载数据:
console.log('Loading clientId...', this.props.match.params.clientId);
但这似乎是错误的。我得到了正确的ID和所有信息,但是..我在这样做吗?有没有更好/更安全的方法来做我正在做的事情?
答案 0 :(得分:3)
另一种选择是在每个TD内使用单独的Link标签:
<td><Link to={`/client/${client.id}`}>{client.name}</Link></td>
这也将更容易访问,因为视力障碍的用户可能难以触发该onclick事件。
答案 1 :(得分:2)
如果您使用的是react-router-dom
,它有一个Link
组件
{this.state.clients.map(client => (
<Link to={`/client/${clientId}`} >
<tr className="tableRow">
<td>{client.name}</td>
</Link>
使用链接而不是在表行上单击onClick更好,以实现可访问性。
如果您不使用react-router-dom
,则可以通过查看源代码来滚动自己的版本-https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
通过这种方式工作,当人们命令单击链接以在新选项卡中将其打开时,它将正常运行。
对于路线,您可以按需获取参数,如果您不希望组件在属性中处理匹配项,则可以执行以下操作:
<Route path="/client/:clientId" children={({ match }) => (<Client {...match.params} />)} />