[英]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.