Semantic UI React - 表格 - 使整行可选择并链接到某处答案

【问题标题】：Semantic UI React - Table - Make whole row selectable and link somewhereSemantic UI React - 表格 - 使整行可选择并链接到某处
【发布时间】：2019-10-28 05:56:11
【问题描述】：

我尝试过使行可选择，但我希望能够单击行内的任意位置并将其链接到某处。每行应该有一个不同的链接。

即使我指定了多个单元格，下面的这种方式也会将我的所有 Table.Cells 放入一个单元格中。

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Link to={'/ticker/'}> 
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            etc...

下面的这种方式解决了问题，但使每个单元格都有悬停，而不是整行悬停。

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         etc...

我想让每一行都可选择并悬停相同的颜色，并让每一行链接到不同的链接。

谢谢！

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

你需要像这样处理 onClick 行：

   <Table.Row
          positive
          onClick={() => {
            handleClick("1");
          }}
        >

您可以在此处查看一个工作示例：

https://codesandbox.io/s/semantic-ui-example-5izhs

【讨论】：

嘿！感谢您的回复。我实际上不希望特定文本成为链接。我想单击该行中的任意位置并将其链接到某处。
@Strawberly 我编辑了答案和示例代码框，你能检查一下吗？

【解决方案2】：

虽然 SuleymanSah 的答案有效，但它有一个缺点。由于他使用的是 onclick 事件，而不是链接/锚点，因此浏览器不会让您在新选项卡/窗口中打开“链接”，或呈现右光标。

在查看此内容后，据我所知，没有适当的方法可以让整行都可点击，同时还告诉浏览器这是一个链接。

【讨论】：

【解决方案3】：

不使用Link，但也许这也是可以接受的。

如果您将行标识符传递给 key 属性：

<Table.Row key={id} onClick={() => onRowClick(id)}>
  <Table.Cell>...</Table.Cell>
  <Table.Cell>...</Table.Cell>
</Table.Row>

然后它将被传递给 onRowClick 函数，并且（假设您使用 React Router）您可以通过将 url 推送到历史记录来导航到页面：

const onRowClick = (id) => {
  console.log(id)  // or push to the Redux store or something like that
  history.push('/page/scan')
}

【讨论】：