将值传递给子组件，单击“提交”按钮 - reactjs，单击两次

Question

我想将值从searchInput（parent）传递到fetchdata（child）组件。它无法正常工作，因为我必须单击两次才能获取数据，并且在单击"提交"按钮后，加载应为TRUE。我知道，我应该使用回调功能，但是我不知道，哪个功能和在哪里。我一周前开始学习Reactj。

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()}

在更改上也做同样的事情