Нажатие на дочерние элементы дает неопределенное событие onclick reactjs

Question

У меня есть компонент для списка ресторанов, и у меня есть событие onClick для каждого элемента списка. Все работает нормально, кроме тех случаев, когда я нажимаю на любой дочерний элемент элемента списка. Он отвечает ни с чем или не определен (я не знаю, потому что в консоли ничего не отображается.) Вот мой компонент:

import React from "react";

class ResturantsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      reviews: {}
    };

  }
  handleReviews = e => {
    const reviewsList = this.props.resturants.find(
      resturant => resturant.id === e.target.id
    );
    console.log(reviewsList.reviews);
  };

  render() {
    let list = this.props.resturants.map(resturant => {
      return (
        <li
          key={resturant.id}
          id={resturant.id}
          className="resturant"
          onClick={this.handleReviews}
        >
          <div className="resturant__hero">
            <h1 className="resturant__name">{resturant.name}</h1>
            <img src={resturant.icon} alt="" className="resturant__icon" />
          </div>
          <div className="resturant__row">
            <p className="item">Rating</p>
            <p className="description">{resturant.rating || "N/A"}</p>
          </div>

        </li>
      );
    });
    return <div>{list}</div>;
  }
}

export default ResturantsList;

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

edit- Привязка в конструкторе не проблема, у меня была эта строка, но это не реальная проблема. Мое событие работает нормально, но только когда я нажимаю li, а не его дочерний элемент.

Answer 1

Используйте e.currentTarget

Попробуйте использовать e.currentTarget вместо e.target в вашем handleReviews(), например:

handleReviews = e => {
    const reviewsList = this.props.resturants.find(
      resturant => resturant.id === e.currentTarget.id // <--- Here
    );
    console.log(reviewsList.reviews);
};

Answer 2

Я решил это, добавив для каждого li атрибут data-id и привязав к нему метод handleReviews.

<li
      key={resturant.id}
      data-id={resturant.id}
      className="resturant"
      onClick={this.handleReviews}
>

А затем в handleReviews я получу элемент с ( e.currentTarget.dataset.id ):

  handleReviews = e => {
    const reviewsList = this.props.resturants.find(
      resturant => resturant.id === e.currentTarget.dataset.id
    );
  };