单击子元素未定义 onclick 事件 reactjs

Question

I have a component for restaurants list and I have an onClick event for every list-item. Everything is working fine except when I click any child element of the list item. It responds with nothing or undefined (I don't know because nothing is showing up in the console.) Here is my component:

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;

So the problem is I can only click on the padding of li to get accurate result otherwise it throws error. This behavior is new for me and very unexpected.

edit- Binding in the constructor is not the problem, I had that line but this is not real issue. My event working just fine but only when I click li and not any of its child.

Answer 1

Use e.currentTarget

Try using e.currentTarget instead of e.target in your handleReviews() , like so:

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

Answer 2

I've solved it by adding for each li's a data-id attribute and binding the handleReviews method to this.

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

And then in handleReviews I'll get the element with ( e.currentTarget.dataset.id ):

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