Добавить событие onclick в пользовательскую функцию рендеринга (создать приложение реакции)

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".Моя цель - вызвать функцию «getComponent» в «html code» (JSX), возвращаемую функцией «PlacesList».Как мне это сделать?Когда я показываю «this» в консоли в функции «PlacesList», она не определена, поэтому мне, вероятно, придется связать «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

когда вы набираете this.getComponent.bind(this), просто связываете функцию getComponent с this объектом и не вызываете его,

вы можете избавиться от привязки, используя функцию стрелки, такую ​​как:

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

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

Вы должны передать метод как реквизит функции и получить доступ к ее функции реквизита. Всегда рекомендуется делать привязку в конструкторе.

    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}/>