时间戳

首页 > 解决方案 > 使用 onClick 在 Table.Row 中单击时转到链接

javascript - 使用 onClick 在 Table.Row 中单击时转到链接

问题描述

我有一个表格，我希望每一行都是可点击的，当你点击它去那个链接（每行不同）。

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={() => {
        <Link
          to={
            entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
          }
        />;
      }}>
      ...
    </Table.Row>
  ))}
</Table.Body>

所以我像上面那样做了，添加了一个组件但不起作用。它说：

期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

我正在使用Table/ Table.RowfromSemantic UI和Linkfrom react-router-dom。我无法更改，Table但该Link组件不是强制性的。无论如何，如果它可以在单击时重定向到该链接，那就太好了。

有什么办法吗？

标签： javascriptreactjsonclicksemantic-uireact-router-dom

解决方案

一种方法是使用历史从组件导航。要获取历史对象，您需要使用react-router:5.1.0useHistory()提供的钩子，或者如果您使用的是旧版本的 react-router

  1. 你将不得不添加一个方法来做到这一点：

功能性

const onNavigate = (entityName, idList) => () => {
  entityName && history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
}

班级

onNavigate = (entityName, idList) {
  return function () {
    return entityName && this.props.history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
  }
}

此方法返回一个函数引用，因此onCLickprop 在渲染时不会触发它，并且some_props由于Closures而在内部函数中可见

  1. 您将方法传递给onClick方法：
<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={onNavigate(enitityName, idList)}
    >
      ...
    </Table.Row>
  ))}
</Table.Body>

这样，点击处理程序将接收到一个函数引用，并应该导航到相应的 url

推荐阅读