Question

它是我的组成部分：

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>
      );
    }

  }

它抛出："Uncaught TypeError: Cannot read property 'getComponent' of undefined"。我的目标是在“ PlacesList”函数返回的“ html代码”（JSX）中调用“ getComponent”函数。我该怎么做？当我在控制台的“ PlacesList”功能中显示“ this”时，它的状态未定义，因此我可能不得不将“ this”绑定到PlacesList函数。

Answer 1

您必须在类的构造函数中绑定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>

工作示例：https://codesandbox.io/s/billowing-frog-weh4l

Answer 2

您必须将方法作为prop传递给函数并访问其props函数。始终建议在构造函数中进行绑定。

    constructor(props) {
      super(props);
      console.log(JSON.parse(localStorage.getItem('PlacesList')));
       this.getComponent =this.getComponent.bind(this)
    }

     function PlacesList(props) {
        ---
        ---
              <header onClick={props.getComponent()}>
                <h4> {place.name} </h4>
              </header>
        ---
        ---
        );

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

Answer 3

在这种情况下，由于this引用了PlacesList而不是类placesList。因此，请尝试此操作。

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>
      );
    }

  }

Answer 4

键入this.getComponent.bind(this)时，只需将getComponent函数绑定到this对象，而不调用它，

您可以通过使用箭头功能来摆脱绑定：

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

在自定义渲染功能中添加onclick事件（创建react应用）

4 个答案: