Как присвоить уникальный идентификатор строкам таблицы в react

#javascript #reactjs

Вопрос:

Мне нужно присвоить разные идентификаторы строкам таблицы, чтобы при нажатии на первую строку на консоли отображалось «selectedRow: 1». Нажмите на вторую строку, она покажет «selectedRow: 2»

Заранее спасибо!

Вот мой код:

 <tbody>
  {this.testData.map((item, i) => {
    return (
      <tr onClick={this.handler} key={i} >
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.address}</td>
      </tr>
    );
  })}
</tbody>

handler=(e)=>{
  let selectedRow = e.target.id //doesn't work
  console.log("selectedRow:", selectedRow)
}

1. Ключ — это не идентификатор элемента, а идентификатор, который помогает react идентифицировать измененные элементы ( reactjs.org/docs/lists-and-keys.html ). <tr id={i} /> даст целевой идентификатор.

Ответ №1:

Для этого вам нужно будет присвоить каждому tr id атрибут, но было бы лучше, если бы вы просто прямо передали этот идентификатор функции, например:

 <tr onClick={() => this.handler(item.id)}>

Вы также можете использовать индекс, если элементы не имеют уникальных идентификаторов.

Теперь функция-обработчик получит идентификатор в качестве аргумента:

 handler = (selectedRow) => {
    console.log("selectedRow:", selectedRow)
}

1. Спасибо! Но как я могу распечатать идентификатор при нажатии на строку таблицы в консоли?

2. Если вы будете следовать этому подходу, handler функция получит идентификатор в качестве параметра. handler = (id) => console.log(id) . Я отредактировал ответ, чтобы лучше проиллюстрировать это.

Ответ №2:

Для tr onClick мы можем присвоить наш идентификатор по <tr onClick={this.handler(item.id)}> своему усмотрению, и наша функция-обработчик будет функцией высокого уровня, как показано ниже, тогда нам не нужно каждый раз создавать функцию

 handler = id => e => {
console.log(id)

}

Пример кода кода из песочницы