Реагировать - как обернуть строку таблицы с помощью ссылки - PullRequest
Новая
       8

Реагировать - как обернуть строку таблицы с помощью ссылки

0 голосов
/ 22 октября 2019

У меня есть таблица, которую я построил, используя реагирует mui . В этой таблице у меня есть строка, которая выглядит следующим образом: 

<TableRow
    hover
    onClick={() => onRowClicked(item)}
    role="checkbox"
    aria-checked={isSelected}
    tabIndex={-1}
    key={item.id}
    data-testid={item.id}
    selected={isSelected}
    className={classes.tr}
  >
    <TableCell padding="checkbox" classes={{body: classes.smWidth}} onClick={(event) => onCheckboxClick(event, item.id)}>
      <Checkbox checked={isSelected}/>
    </TableCell>
    <TableCell component="th" scope="row" classes={{body: classes.id}}>{item.id}</TableCell>
    <TableCell align="left">{item.text}</TableCell>
    <TableCell align="left">{item.code}</TableCell>
    <TableCell align="left">{item.type}</TableCell>
    <TableCell align="left"><StatusLabel status={item.substatus || item.status} size="large"/></TableCell>
    <TableCell align="left">{getElapsedTime(new Date(item.updated), now)}</TableCell>
  </TableRow>

И это прекрасно работает, но вместо использования функции onClick для перехода к каждому элементу, я хотел бы использовать ссылку, чтобы я такжеполучить на контроль / CMD нажмите возможность открыть ссылку в новой вкладке. Я попытался просто обернуть весь TableRow компонентом Link: 

<Link to={`/${item.id}`}>
 <TableRow
    hover
    role="checkbox"
    aria-checked={isSelected}
    tabIndex={-1}
    key={item.id}
    data-testid={item.id}
    selected={isSelected}
    className={classes.tr}
  >
    <TableCell padding="checkbox" classes={{body: classes.smWidth}} onClick={(event) => onCheckboxClick(event, item.id)}>
      <Checkbox checked={isSelected}/>
    </TableCell>
    <TableCell component="th" scope="row" classes={{body: classes.id}}>{item.id}</TableCell>
    <TableCell align="left">{item.text}</TableCell>
    <TableCell align="left">{item.code}</TableCell>
    <TableCell align="left">{item.type}</TableCell>
    <TableCell align="left"><StatusLabel status={item.substatus || item.status} size="large"/></TableCell>
    <TableCell align="left">{getElapsedTime(new Date(item.updated), now)}</TableCell>
  </TableRow>
 </link>

Но тогда стиль всей таблицы неуместен. Каков правильный способ сделать это тогда?

...