反应并导航到所选项目

时间:2018-09-01 05:39:27

标签: javascript reactjs

我有一个要显示给用户的用户表。他们单击一行,然后我要导航到一个组件以显示详细信息。

  <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和所有信息,但是..我在这样做吗?有没有更好/更安全的方法来做我正在做的事情?

2 个答案:

答案 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} />)} />