Transmettez les valeurs au composant enfant sur le bouton de validation de clic - ReactJS, cliquez deux fois

Question

Je souhaite transmettre des valeurs de SearchInput (parent) à FetchData (enfant). Cela ne fonctionne pas correctement, car je dois cliquer deux fois pour récupérer les données et this.props.loaded devrait être vrai après avoir cliqué sur le bouton "submit". Je sais, que je devrais utiliser la fonction de rappel, mais je ne sais pas, quelle fonction et où. J'ai commencé à apprendre ReactJS il y a une semaine.

import React, {Component} from "react"; 
 

 
import FetchData from "./FetchData"; 
 

 
export default class SearchInput extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     cityName: "", 
 
     loaded: false 
 
    } 
 
    this.handleCityNameChange = this 
 
     .handleCityNameChange 
 
     .bind(this); 
 
    this.handleSubmitButton = this 
 
     .handleSubmitButton 
 
     .bind(this); 
 
    } 
 
    handleCityNameChange = (e) => { 
 
    const val = e.target.value; 
 
    this.setState({cityName: val}); 
 
    e.preventDefault(); 
 
    } 
 
    handleSubmitButton = (e) => { 
 
    //const val = document.getElementById("search").value; 
 
    this.setState({cityName: this.state.cityName, loaded: true}); 
 
    e.preventDefault(); 
 
    } 
 
    render() { 
 
    const {cityName, loaded} = this.state; 
 
    return (
 
     <div> 
 
     <form> 
 
      <label htmlFor="search">Search city:</label> 
 
      <input 
 
      type="text" 
 
      name="search" 
 
      id="search" 
 
      value={this.state.cityName} 
 
      onChange={this.handleCityNameChange}/> 
 
      <input type="submit" onClick={this.handleSubmitButton}/> 
 
     </form> 
 
     <FetchData 
 
      cityName={cityName} 
 
      loaded={loaded} 
 
      handleSubmitButton={this.handleSubmitButton}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
import React, {Component} from "react"; 
 
import axios from "axios"; 
 

 
import DisplayWeather from "./DisplayWeather"; 
 

 
export default class FetchData extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      descriptionMain: "", 
 
      description: "", 
 
      temperature: null, 
 
      weatherIcon: "" 
 
     } 
 
     
 
    } 
 
    // otherFunc() { 
 
    //  this.props.handleSubmitButton(); 
 
    // } 
 
    fetchData =() => { 
 
     if (this.props.loaded) { 
 
      const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${this.props.cityName}&units=metric&APPID=e6f4d816d3ade705ec1d8d9701b61e14`; 
 
      console.log(apiURL) 
 
      axios 
 
       .get(apiURL) 
 
       .then(res => { 
 
        this.setState({descriptionMain: res.data.weather[0].main, description: res.data.weather[0].description, temperature: res.data.main.temp, weatherIcon: res.data.weather[0].icon}); 
 
       }) 
 
     } 
 
    } 
 
    componentWillReceiveProps() { 
 
     this.fetchData(); 
 
    } 
 
    render() { 
 
     return (
 
      <div> 
 
       <DisplayWeather {...this.state} cityName={this.props.cityName}/> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 

 
export default class DisplayWeather extends Component { 
 
    render() { 
 
    const {descriptionMain, description, temperature, weatherIcon, cityName} = this.props; 
 
    return (
 
     <div> 
 
     <h3>{cityName}</h3> 
 
     <h4>Sky: {description}</h4> 
 
     <h5>Description: {descriptionMain}</h5> 
 
     <span className="temperature">{temperature} 
 
      °C</span> 
 
     <img 
 
      src={`http://openweathermap.org/img/w/${weatherIcon}.png`} 
 
      alt={`${description}`}/> 
 
     </div> 
 
    ) 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Il faut enfermer le soumettre attribut dans une fonction de flèche:

onClick{()=>this.handleSubmutButton()} 

Faites la même chose pour le changement et