语义 UI React - Table - 使整行可选择并在某处 link

Question

我试过使行可选择，但我希望能够单击该行内的任意位置并将它 link 放在某处。每行应该有不同的 link.

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

我想让每一行都可选择并悬停相同的颜色，并将每一行 link 设置为不同的 link。

谢谢！

Answer 1

您需要像这样处理行中的 onClick：

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

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

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

Answer 2

虽然 SuleymanSah 的答案有效，但它有一个缺点。由于他使用的是onclick事件，而不是link/anchor，浏览器不会让你在新的tab/window中打开“link”，也不会渲染右光标。

在调查之后，据我所知，没有合适的方法让整行都可以点击，同时告诉浏览器它是 link.

Answer 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')
}

Answer 4

如果您真的需要一个锚行以便可以在新选项卡中打开每一行，我想我找到了一个窍门。

        <Table.Body>
          {customers.map((customer, i) => {
            return (
              <Table.Row key={i} className={styles.row}>
                <Table.Cell>{formatName(customer)}</Table.Cell>
                <Table.Cell>{formatAddress(customer)}</Table.Cell>
                <Table.Cell>{formatContact(customer)}</Table.Cell>
                <Table.Cell>{formatBirthdate(customer)}</Table.Cell>
                )}
                <Table.Cell className={styles['link-cell']}>
                  <Link href={`/customers/${customer.id}`} passHref>
                    <a className={styles.link}></a>
                  </Link>
                </Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>

然后在我的 css 模块中

.row {
  cursor: pointer;
  position: relative;
}

.link-cell {
  padding: 0 !important;
  border: 0 !important;
}

.link {
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

想法是让标签散布到整行。如果您的行中没有任何其他可点击元素，这将是理想的

语义 UI React - Table - 使整行可选择并在某处 link

Semantic UI React - Table - Make whole row selectable and link somewhere

reactjs

semantic-ui

semantic-ui-react