Сделать строку таблицы интерактивной с помощью Link - PullRequest
Новая
       100

Сделать строку таблицы интерактивной с помощью Link

0 голосов
/ 14 июля 2020

Теперь доступна только ячейка таблицы, содержащая значок, как здесь, в конце: 

<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>

Но, к сожалению, это не работает. Есть ли способ изменить его и сделать всю строку интерактивной?

1 Ответ

0 голосов
/ 14 июля 2020

Поместите свой элемент <Table.Row> внутри элемента <Link>. Это «обернет поведение <Link> вокруг <Table.Row>».

Я считаю, что этот код решит вашу проблему: 

<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>
...