web-dev-qa-db-fra.com

Comment rendre un composant surClick avec React?

J'essaie de rendre une carte d'un emplacement spécifique qui est transmis à partir d'un composant parent. J'utilise google-maps-react et je ne suis pas sûr de deux choses:

Comment appeler des fonctions avec onClick dans mon rendu. Et comment écrire la fonction dans ma classe qui rend le composant que je veux. C'est ce que j'ai jusqu'à présent:

import React, { Component } from 'react';
import Yelp from 'Yelp-fusion';
import xhr from 'xhr';
import GoogleMapContainer from './Map';

class BusinessCard extends Component {
  constructor () {
    super()

    this.renderMap = this.renderMap.bind(this);
  }

  renderMap(){
    <GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} />
  }

  render() {
    const newCard = this.props.newCard
    const bar = this.props.selectedBar
    // console.log("this are the coordinates", bar["coordinates"])
    if(bar.coordinates){
      return (
        <div>
          <p>{bar.coordinates.longitude}</p>
          <p>{bar.name}</p>
          <img src={bar.image_url} />
          <button> X </button>
          <button onClick={newCard}> Yes </button>

        </div>
      )
    } else {
      return(
        <div>Loading...</div>
      )
    }
  }
}

export default BusinessCard;

Pour le moment, il y a un problème avec cette compilation car bar n'est pas défini lors du rendu. Des suggestions/conseils?

reactjsnpmjsxgoogle-maps-react
6
user7496931

Tout d'abord, dans un composant React, la méthode render() est votre pont entre le DOM virtuel (conservé en mémoire par React) et le DOM concret ce qui est montré à l'utilisateur. Je voudrais en savoir plus sur un React cycle de vie du composant - comprendre cela, c'est comprendre réagir.

De plus, pour afficher votre GoogleMapContainer dans la page, vous devez appeler votre méthode renderMap() dans la méthode React render() , stockez le résultat dans une variable et retournez-le.

Pour appeler plusieurs fonctions dans onClick, c'est tout à fait possible, passez une fonction au gestionnaire et appelez le nombre de fonctions que vous souhaitez.

Vérifiez cet exemple:

import React, { Component } from 'react';
import Yelp from 'Yelp-fusion';
import xhr from 'xhr';
import GoogleMapContainer from './Map';

class BusinessCard extends Component {
  constructor () {
    super()

    // LOOK MORE WHAT 'this' means!! <- the key of javascript = execution context
    this.renderMap = this.renderMap.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  renderMap(){
    // carefull!!! bar is undefined. Look more what 'this' means in javascript
    const bar = this.props.selectedBar;
    return (
      <GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} />
    );
  }

  handleClick() {
    const newCard = this.props.newCard;

    // call the newCard function prop (if only is a function!!!)
    newCard();

    // another method call
    this.anotherMethod();
  }

  anotherMethod() {
    console.log('heyo!');
  }

  render() {
    const newCard = this.props.newCard
    const bar = this.props.selectedBar
    // console.log("this are the coordinates", bar["coordinates"])
    if(bar.coordinates){
      const renderMap = this.renderMap();
      return (
        <div>
          <p>{bar.coordinates.longitude}</p>
          <p>{bar.name}</p>
          <img src={bar.image_url} />
          <button> X </button>
          <button onClick={this.handleClick}> Yes </button>
          { renderMap }
        </div>
      )
    } else {
      return(
        <div>Loading...</div>
      )
    }
  }
}
5
Dragos Rizescu