单击“提交"按钮将值传递给子组件-ReactJS，单击两次 [英] Pass values to child component on click submit button - ReactJS, click twice

问题描述

我想将值从SearchInput(父级)传递到FetchData(子级)组件.它无法正常工作，因为我必须单击两次以获取数据，并且在单击提交"按钮后this.props.loaded应该为true.我知道，我应该使用回调函数，但是我不知道哪个函数以及在哪里.我一周前开始学习ReactJS.

I want to pass values from SearchInput (parent) to FetchData (child) component. It does not work properly, because I have to click twice to fetch data and this.props.loaded should be true after click on submit button. I know, that I should use callback function, but I dont know, which function and where. I'm started to learn ReactJS a week ago.

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>

推荐答案

您必须将Submit属性包含在箭头函数中:

You have to enclose the submit attribute in an arrow function:

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

对更改也做同样的事情

这篇关于单击“提交"按钮将值传递给子组件-ReactJS，单击两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！