クリック送信ボタンで値を子コンポーネントに渡す - ReactJSを2回クリックします

Question

SearchInput（親）からFetchData（子）コンポーネントに値を渡したいとします。データをフェッチするために2回クリックする必要があるため、送信ボタンをクリックしてthis.props.loadedをtrueにする必要があるため、正常に動作しません。私はコールバック関数を使うべきだと知っていますが、私は知っていません。私は1週間前にReactJSを学び始めました。

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

あなたは矢印の機能に提出した属性を囲む必要があります：

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

も同様に変更のため