Как при клике на элемент получить src и value дочерних элементов?

Question

[Hellas]

<li onClick={this.select}>
  <img src="/uploads/0.png"/>
  <span>Test</span>
</li>

Необходимо при клике на li получить значения /uploads/0.png и Test.

Answer 1

[Anton Bobylev]

В обработчике события перебирайте любым удобным способом e.target.children, где e - параметр функции обработчика.

Comments

[Hellas]

Выводит пустой массив: HTMLCollection[0]

[davidnum95]

Hellas: покажи весь код компонента или что там у тебя

[Anton Bobylev]

Hellas: вы уверены, что кликните именно на элемент списка, а не на его дочерние элементы? Посмотрите, что в e. target.

Answer 2

[Никита Гущин]

Доставать что-то из ноды - это не совсем react-way (т.к. реакт инкапсулирует работу с DOM).

Сделайте отдельный компонент под это дело:

class ListItem extends React.PureComponent {
  handleClick = () => {
    const { src, label, onClick } = this.props

    return onClick(src, label)
  }

  render() {
    const { src, label, onClick } = this.props

    return (
      <li onClick={onClick && this.handleClick}>
        <img src={src} />
        <span>{label}</span>
      </li>
    )
  }
}

И передавайте в этот компонент нужные значения:

<ListItem src="/uploads/0.png" label="Test" onClick={this.select} />