Reactjs 在自定义渲染函数中添加onclick事件（创建react应用程序）

它是我的组成部分：

export default class placesList extends Component {
    constructor(props) {
      super(props);
      console.log(JSON.parse(localStorage.getItem('PlacesList')));
    }

    getComponent(){
      console.log("getComponent hello")
    }

    render() {
      let places = JSON.parse(localStorage.getItem('PlacesList'));

      function PlacesList(props) {
        const content = props.places.map((place) =>
          <div key={place.id} className="mt-5">

            <a href="#" className="place_link">
              <header onClick={this.getComponent.bind(this)}>
                <h4> {place.name} </h4>
              </header>
            </a>
            <div className="info mt-3">
              Address: {place.vicinity} <br/>
              Rating: {place.rating} <br/>
              Price level: {place.price_level} <br/>
            </div>

          </div>
        );

        return (
          <div>
            {content}
          </div>
        );
      }

      return (
        <div className="component-places-list">

          <div className="containter">
            <div className="row">

              <header className="col-12 px-5 mt-5 mb-2">
                <h2> Here are results: </h2>
              </header>

              <div className="spacer col-1"></div>
              <main className="results col-10">

                <PlacesList places={places} className=""/>

              </main>
              <div className="spacer col-1"></div>

            </div>
          </div>

        </div>
      );
    }

  }

导出默认类placesList扩展组件{
建造师（道具）{
超级（道具）；
log（JSON.parse（localStorage.getItem（'PlacesList'））；
}
getComponent（）{
log（“getComponent hello”）
}
render（）{
让places=JSON.parse（localStorage.getItem（'PlacesList'）；
功能位置列表（道具）{
const content=props.places.map（（place）=>
地址：{地点附近}

评级：{place.Rating}

价格水平：{place.Price_level}

);
返回(
{content}
);
}
返回(
以下是结果：
);
}
}

---

它抛出：

“uncaughttypeerror:无法读取未定义的”

的属性“getComponent”。我的目标是在“PlacesList”函数返回的“html代码”（JSX）中调用“getComponent”函数。我怎么做？当我在控制台中的“PlacesList”函数中显示“this”时，其未定义，因此我可能必须将“this”绑定到PlacesList函数。

您必须在类的构造函数中绑定getComponent方法

constructor(props) {
  super(props);
  this.getComponent = this.getComponent.bind(this);
}

然后将函数传递给组件

<PlacesList places={places} getComponent={this.getComponent} className="" />

然后将标题的onClick更改为：

<header onClick={props.getComponent}>
    <h4> {place.name} 1</h4>
</header>

{place.name}1

---

工作示例：

原因

此

在这种情况下，引用的是

位置列表

而不是类

位置列表

。因此请尝试此操作

function PlacesList(props) {
        const content = props.places.map((place) =>
          <div key={place.id} className="mt-5">

            <a href="#" className="place_link">
              <header onClick={props.getComponent}>
                <h4> {place.name} </h4>
              </header>
            </a>
            <div className="info mt-3">
              Address: {place.vicinity} <br/>
              Rating: {place.rating} <br/>
              Price level: {place.price_level} <br/>
            </div>

          </div>
        );

        return (
          <div>
            {content}
          </div>
        );
      }


export default class placesList extends Component {
    constructor(props) {
      super(props);
      console.log(JSON.parse(localStorage.getItem('PlacesList')));
    }

    getComponent(){
      console.log("getComponent hello")
    }

    render() {
      let places = JSON.parse(localStorage.getItem('PlacesList'));

      return (
        <div className="component-places-list">

          <div className="containter">
            <div className="row">

              <header className="col-12 px-5 mt-5 mb-2">
                <h2> Here are results: </h2>
              </header>

              <div className="spacer col-1"></div>
              <main className="results col-10">

                <PlacesList getComponent={this.getComponent.bind(this)} places={places} className=""/>

              </main>
              <div className="spacer col-1"></div>

            </div>
          </div>

        </div>
      );
    }

  }

功能位置列表（道具）{
const content=props.places.map（（place）=>
地址：{地点附近}

评级：{place.Rating}

价格水平：{place.Price_level}

);
返回(
{content}
);
}
导出默认类placesList扩展组件{
建造师（道具）{
超级（道具）；
log（JSON.parse（localStorage.getItem（'PlacesList'））；
}
getComponent（）{
log（“getComponent hello”）
}
render（）{
让places=JSON.parse（localStorage.getItem（'PlacesList'）；
返回(
以下是结果：
);
}
}

当您键入

this.getComponent.bind（this）

时，只需将getComponent函数绑定到

this

对象，而不调用它

您可以使用如下箭头函数摆脱绑定：

<a href="#" className="place_link">
              <header onClick={(event)=>this.getComponent(event)}>
                <h4> {place.name} </h4>
              </header>
            </a>

---

尝试在类似渲染的PlacesList（）函数调用{this.getComponent（）}中调用getComponent（）函数。您的回答对我来说很好，感谢您提供的示例。