Javascript 单击子元素会给出未定义的onclick事件

我有一个餐馆列表组件，每个列表项都有一个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;

从“React”导入React；
类ResturantsList扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
评论：{}
};
}
handleReviews=e=>{
const reviewsList=this.props.resturants.find(
resturant=>resturant.id==e.target.id
);
日志（reviewsList.reviews）；
};
render（）{
let list=this.props.resturants.map（resturants=>{
返回(

{resturant.name}
评级

{resturant.rating | |“不适用”}

);
});
返回{list}；
}
}
导出默认ResturantsList；

所以问题是我只能点击li的填充来得到准确的结果，否则它会抛出错误。 这种行为对我来说是新的，非常出乎意料

编辑-

---

构造函数中的绑定不是问题，我有这句话，但这不是真正的问题。我的事件工作正常，但只有在我单击li而不是它的任何子项时才工作。

我通过为每个li添加一个数据id属性并将handleReviews方法绑定到该属性来解决它

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

使用

在

handleReviews（）

中尝试使用

e.currentTarget

而不是

e.target

，如下所示：

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

handleReviews=e=>{
const reviewsList=this.props.resturants.find(
resturant=>resturant.id==e.currentTarget.id//尝试在构造函数内部初始化
this.handleReviews
，
constructor（props）{super（props）；this.state={reviews:{}；this.handleReviews=this.handleReviews.bind（this）；//添加此行}
它只与e.currentTarget.id一起工作，因此不需要数据id。谢谢你的回答。很高兴为你提供帮助：）
handleReviews = e => {
    const reviewsList = this.props.resturants.find(
      resturant => resturant.id === e.currentTarget.id // <--- Here
    );
    console.log(reviewsList.reviews);
};