簡體   English   中英

使用鏈接使表格行可點擊

[英]Make row of table clickable with Link

現在只有一個包含圖標的表格單元格是可點擊的,就像最后一樣:

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row key={idList && idList[rowIndex]}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
            src={row.cells[0]}
          />
        </Table.Cell>
      )}
      {
        (emptyFirstHeader ? row.cells.shift() : row,
        row.cells.map((cell, cellIndex) => {
          if (cell === undefined) {
            return null;
          }
          return (
            <Table.Cell key={idList}>
              {cell}
            </Table.Cell>
          );
        }))
      }

      <Table.Cell>
        <Link //here is the link done - inside a table cell
            to={
              entityName &&
              `/${entityName}/${idList[rows.indexOf(row)]}`
            }>
            <Icon name="ellipsis horizontal" />
          </Link>
      </Table.Cell>
    </Table.Row>
  ))}
</Table.Body>

我的目標是使整行可點擊(並重定向到該新鏈接)。 所以我試圖使該行可點擊:

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row key={idList && idList[rowIndex]}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
            src={row.cells[0]}
          />
        </Table.Cell>
      )}
      {
        (emptyFirstHeader ? row.cells.shift() : row,
        row.cells.map((cell, cellIndex) => {
          if (cell === undefined) {
            return null;
          }
          return (
            <Table.Cell key={idList}>
              {cell}
            </Table.Cell>
          );
        }))
      }

      <Table.Cell>       
        <Icon name="ellipsis horizontal" />
      </Table.Cell>
         // moved it outside the Tabel.Cell and now it is inside Table.Row
         <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}>
         </Link>
    </Table.Row>
  ))}
</Table.Body>

但不幸的是,它不起作用。 有沒有辦法改變它並使整行可點擊?

<Table.Row>元素放在<Link>元素中。 這樣做將“圍繞<Table.Row>包裝<Link>行為”。

我相信這段代碼會解決你的問題:

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Link to={entityName && `/${entityName}/${idList[rows.indexOf(row)]}`}>    
      <Table.Row key={idList && idList[rowIndex]}>
        {emptyFirstHeader && (
            <Table.Cell>
                <Image src={row.cells[0]} />
            </Table.Cell>
        )}
        {
          (emptyFirstHeader ? row.cells.shift() : row, row.cells.map((cell, cellIndex) => {
            if (cell === undefined) {
              return null;
            }
            return (
              <Table.Cell key={idList}>
                {cell}
              </Table.Cell>
            );
          }))
        }
        <Table.Cell>       
          <Icon name="ellipsis horizontal" />
        </Table.Cell>         
      </Table.Row>
    </Link>
  ))}
</Table.Body>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM