单击 child 元素为 onclick 事件 reactjs 提供未定义

Question

我有一个餐厅列表组件，每个 list-item 都有一个 onClick 事件。一切正常，除非我单击列表项的任何 child 元素。它没有响应或未定义（我不知道，因为控制台中没有显示任何内容。）这是我的组件：

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 的填充来获得准确的结果，否则会抛出错误。这种行为对我来说是新的，非常出乎意料。

编辑- 构造函数中的绑定不是问题，我有那条线，但这不是真正的问题。我的活动工作得很好，但只有当我点击 li 而不是它的任何 child.

时

Answer 1

我已经通过为每个 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
    );
  };

Answer 2

Use e.currentTarget

尝试在 handleReviews() 中使用 e.currentTarget 而不是 e.target，像这样：

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

单击 child 元素为 onclick 事件 reactjs 提供未定义

Clicking on child elements gives undefined for onclick event reactjs

javascript

onclick

event-handling

dom-events

reactjs