Получить ключ элемента в реакторе

В компоненте React, который я создал, у меня есть это внутри возвращаемого значения метода render:

this.props.albums.map(function(albumDetails, id) {
    return (<div className="artistDetail" key={id} onClick={component.getTracks}>
        <img src={albumDetails.imageSrc} />
        <p><a href="#" >{albumDetails.name}</a></p>
    </div>)

Если я не указал ключ, React предупредил меня об этом. Так я и сделал. Затем я указал onClick обработчик событий:

getTracks: function (e) {
   console.log(e.target.key);
},

В надежде, что я могу получить атрибут ключа <div>, который я создал. Однако это не сработает (я получаю вывод HTML для e.target, но ничего для e.target.key). Как я могу получить атрибут key от элемента, на который я нажал?

Ответ 1

Лучший способ получить значение атрибута ключа - это просто передать его как еще один атрибут, который имеет смысл. Например, я часто делаю это:

const userListItems = users.map(user => {
  return <UserListItem
    key={ user.id }
    id={ user.id }
    name={ user.name }
  });

или в вашем случае:

this.props.albums.map(function(albumDetails) {
  return (<div className="artistDetail" key={albumDetails.id} data-id={ albumDetails.id } onClick={component.getTracks}>
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)

Кажется излишним, но я думаю, что он более явный, потому что key - это чисто реагирующая концепция реализации, которая может означать нечто отличное от id, хотя я почти всегда использую уникальные идентификаторы, как мои значения key. Если вы хотите иметь id, когда вы ссылаетесь на объект, просто передайте его.

Ответ 2

Ключ предназначен для внутреннего использования React и не будет отображаться в HTML и консоли, вам просто нужно использовать идентификатор для извлечения этого уникального компонента. например:

getTracks: function (e) {
   console.log(e.target.id?e.target.id:e.target);
}

this.props.albums.map(function(albumDetails) {
  return (<div key id={ albumDetails.id } onClick={component.getTracks} className="artistDetail" >
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)
}

А также вам не нужно передавать значение ключевому атрибуту. Значение полностью необязательно.