reactjs - Semantic UI React - Table - 使整行可选择并链接到某处

Question

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

即使我指定了多个单元格，下面的这种方式也会将我所有的 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...

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

谢谢!

Answer 1

您需要像这样按行处理 onClick:

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

你可以在这里看到一个工作示例:

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