Как получить данные из щелчка строки таблицы с помощью компонента React Table от Semantic

Question

Я пытаюсь получить значение по клику из таблицы, которую я отображаю с помощью Semantic UI с React. Я генерирую свою строку, используя неизменный список, и я хочу щелчок мышью, который дает доступ к уникальному значению идентификатора. Когда я регистрирую свою попытку извлечь значение в моем обратном вызове, я получаю:

'bff3a3e9-489e-0e19-c27b-84c10db2432b', завернутый в тег td

Соответствующий код:

  handleRowClick = (scen) => {
    console.log(Object.keys(scen.target));
    console.log(scen.target.);
  }

  mapScenarios = () => {
      return ((scen, i) => {
        return(
          <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}>
            <Table.Cell
              children={scen.get('id') || '(No ID)'}
            />
            <Table.Cell
              children={scen.get('name') || '(No Name)'}
            />
            <Table.Cell
              children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`}
            />
          </Table.Row>
        )
      })
  }

Answer 1

С семантическим пользовательским интерфейсом для реакции, щелчок строки не реализован хорошо. При щелчке строки вы на самом деле получаете значение CELL из этой строки, а это не то, что я хотел, но я подумал, что это сработало, потому что я нажимал на ячейку, содержащую Id. Вот обходной путь.

  <Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>

Answer 2

Вот как я заставил строку работать как ссылку на маршрутизатор реакции:

const RowClickable = React.forwardRef((props, ref) => (
    <Table.Row ref={ref} onClick={props.navigate}>{props.children}</Table.Row>
))

const RowItem = ({id, name}) => (
    <Link to={`/item/${id}/`} component={RowClickable}>
        <Table.Cell>
            <Header as="h4">{name}</Header>
        </Table.Cell>
    </Link>
)