Как вытащить атрибут из таблицы в REACT?

Question

[Siv_Nefzer]

Доброго времени суток. Столкнулся с непонятной для меня ( как для ламера в програмvировании на js и React ) проблемой. Путаюсь вытащить значение ячейки из таблицы, сформированной из GET запроса по массиву, вместо значения он выдает NaN . пробовал принудительно переводить в число, все тот же ответ. В консоли видно, что атрибут присваивается data-row
Код таблицы и как пишу атрибут

renderContent(item,idx){
        return(
          <React.Fragment key={idx}>
            <tr  key = { idx } onClick={this.handleChange} data-row={ item.id } >
              <td >{item.id} </td>
              <td>{item.number}</td>
              <td>{item.data}</td>
              <td>{item.idstate}</td>
              <td>{item.sstatemc}</td>
              <td>{item.sstatehl}</td>
            </tr>
          </React.Fragment>
        )  }

Выводить пытаюсь сначала на алерт чтобы понять поймал или нет

alert(Айдишник: ' + (event.target.dataset.row, 10) );

Cудя по моим минимальным навыка не срабатывает event.target.dataset.row
Подскажите что я делаю не так или что надо дописать в код для работоспособности. Заранее спасибо

Answer 1

[Siv_Nefzer]

как было сделано по итогу

renderContent(item,idx){
        return(
          <React.Fragment key={idx}>
            <tr  key = { idx } onClick={this.handleChange} data-row={item.id} >
              <td >{item.id} </td>
              <td>{item.number}</td>
              <td>{item.data}</td>
              <td>{item.idstate}</td>
              <td>{item.sstatemc}</td>
              <td>{item.sstatehl}</td>
            </tr>
          </React.Fragment>
        )  }

и вывод

handleChange(event) {
    let target = event.currentTarget.dataset.row;
    console.log(target);
  }

Проблема была в следующем.:
1- не прописан event в событии
2 - необходимо было использовать .currentTarget

Answer 2

[abberati]

А зачем что-то вытаскивать из DOM, если можно не вытаскивать?

return (
  <React.Fragment key={idx}>
    <tr
      key={idx}
      onClick={() => {
        alert(item.id)
        this.handleClick(item.id)
      }}
    >
      <td>{item.id} </td>
      <td>{item.number}</td>
      <td>{item.data}</td>
      <td>{item.idstate}</td>
      <td>{item.sstatemc}</td>
      <td>{item.sstatehl}</td>
    </tr>
  </React.Fragment>
)

UPD: а откуда у вас скобки с запятой и десяткой тут?

alert(Айдишник: ' + (event.target.dataset.row, 10) );

и зачем? ошибка здесь, но воспользуйтесь моим советом – не обращайтесь лишний раз к DOM, в реакте это не нужно.

Comments

[Siv_Nefzer]

проблема в том, что его надо передать в последствии в другой запрос на другую страницу. алерт использовал только для того, чтобы понять вытаскивается или нет. при том что вытаскиваться он должен по клику на строку, и пересылаться.

[abberati]

Siv_Nefzer, я показал рабочий пример