通过单击提交按钮将值传递给子组件 - ReactJS，单击两次

Question

我想将SearchInput（父级）中的值传递给FetchData（子级）组件。它不能正常工作，因为我必须点击两次才能获取数据，点击提交按钮后this.props.loaded应该是true。我知道，我应该使用回调函数，但我不知道，哪个函数和哪里。我一周前开始学习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()} 

做同样的变化，以及