Передача реквизита от ребенка к родительскому (без контекста)

Question

У меня проблема с переводом головы с передачей состояний родителям. Мне нужно отправить данные из формы контейнера для приложения, так что я могу показать обновленные состояния списка в информации о погоде после того, как подать

class App extends Component { 

render() { 
return (
    <div className="App"> 
    <div className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h2>Weather App</h2> 
    </div> 
    <p className="App-intro"> 
     To get started, edit <code>src/App.js</code> and save to reload. 
    </p> 
     <FormContainer label="Name of the city:"/> 
     <WeatherInfo 
      nameOfCity={this.state.nameOfCity} 
      weatherDescription={this.state.weatherDescription} 
      windSpeed={this.state.windSpeed} 
      temperature={this.state.temperature} 
      maxTemperature={this.state.maxTemperature} 
      minTemperature={this.state.minTemperature} 
     /> 
    </div> 
); 
} 
} 
export default App; 

Форма контейнера

class FormContainer extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     cityName: '', 
     nameOfCity:'', 
     weatherDescription:'', 
     windSpeed:'', 
     temperature:'', 
     maxTemperature:'', 
     minTemperature:'' 
    }; 
    this.handleFormSubmit = this.handleFormSubmit.bind(this); 
    this.handleCityName = this.handleCityName.bind(this); 
} 

handleFormSubmit(e) { 
    e.preventDefault(); 

    const SendForm = { 
     cityName: this.state.cityName 
    }; 
    console.log(SendForm); 
    fetch(`http://api.openweathermap.org/data/2.5/forecast/weather?q=${SendForm.cityName}&units=metric&APPID=********`) 
     .then(res => res.json()) 
     .then(results => { 
      this.setState({ 
       nameOfCity: results.city.name, 
       weatherDescription: results.list[0].weather[0].description, 
       windSpeed: results.list[2].wind.speed, 
       temperature: results.list[0].main.temp, 
       maxTemperature: results.list[0].main.temp_max, 
       minTemperature: results.list[0].main.temp_min 
      }); 
     }); 
} 

handleCityName(value) { 
    this.setState({ cityName: value }); 
} 

render() { 
    return (
     <div> 
     <form onSubmit={this.handleFormSubmit}> 
      <label>{this.props.label}</label> 
      <SearchBar 
       name="CityName" 
       type="text" 
       value={this.state.cityName} 
       placeholder="search" 
       onChange={this.handleCityName} 
      /> 
      <button type="submit" 
        className="" 
        value='Submit' 
        placeholder="Search" /> 
     </form> 

     </div> 
    ); 
} 
} 

export {FormContainer}; 

поиска панели компонентов

const SearchBar = (props) => (
<div> 
    <label>{props.label}</label> 
    <input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={(e)=>props.onChange(e.target.value)}/> 
</div> 
); 

export default SearchBar; 

и метеорологической информации

const WeatherInfo = (props) => (
<div> 
    <ul> 
     <li>{props.nameOfCity}</li> 
     <li>{props.weatherDescription}</li> 
     <li>{props.windSpeed}</li> 
     <li>{props.temperature}</li> 
     <li>{props.maxTemperature}</li> 
     <li>{props.minTemperature}</li> 
    </ul> 
</div> 
); 

export default WeatherInfo; 

Answer 1

Вы можете передать метод обновления App состояния в FormContainer компонент

class App extends Component { 

constructor() { 
    this.state = { 
     cityName: '', 
     nameOfCity:'', 
     weatherDescription:'', 
     windSpeed:'', 
     temperature:'', 
     maxTemperature:'', 
     minTemperature:'' 
    }; 
} 

updateInfo(results) { 
    this.setState({ 
       nameOfCity: results.city.name, 
       weatherDescription: results.list[0].weather[0].description, 
       windSpeed: results.list[2].wind.speed, 
       temperature: results.list[0].main.temp, 
       maxTemperature: results.list[0].main.temp_max, 
       minTemperature: results.list[0].main.temp_min 
      }); 
} 

render() { 
return (
    <div className="App"> 
    <div className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h2>Weather App</h2> 
    </div> 
    <p className="App-intro"> 
     To get started, edit <code>src/App.js</code> and save to reload. 
    </p> 
     <FormContainer label="Name of the city:" updateInfo={this.updateInfo.bind(this)} 
      nameOfCity={this.state.nameOfCity} 
     /> 
     <WeatherInfo 
      nameOfCity={this.state.nameOfCity} 
      weatherDescription={this.state.weatherDescription} 
      windSpeed={this.state.windSpeed} 
      temperature={this.state.temperature} 
      maxTemperature={this.state.maxTemperature} 
      minTemperature={this.state.minTemperature} 
     /> 
    </div> 
); 
} 
} 
export default App; 

И называют его от FormComponent

class FormContainer extends Component { 

constructor(props) { 
    super(props); 
    this.handleFormSubmit = this.handleFormSubmit.bind(this); 
    this.handleCityName = this.handleCityName.bind(this); 
} 

handleFormSubmit(e) { 
    e.preventDefault(); 

    const SendForm = { 
     cityName: this.props.cityName 
    }; 
    console.log(SendForm); 
    fetch(`http://api.openweathermap.org/data/2.5/forecast/weather?q=${SendForm.cityName}&units=metric&APPID=********`) 
     .then(res => res.json()) 
     .then(results => { 
      this.props.updateInfo(results); 
     }); 
} 

handleCityName(value) { 
    // Do what you want to do, like resend API request or smth 
} 

render() { 
    return (
     <div> 
     <form onSubmit={this.handleFormSubmit}> 
      <label>{this.props.label}</label> 
      <SearchBar 
       name="CityName" 
       type="text" 
       value={this.props.cityName} 
       placeholder="search" 
       onChange={this.handleCityName} 
      /> 
      <button type="submit" 
        className="" 
        value='Submit' 
        placeholder="Search" /> 
     </form> 

     </div> 
    ); 
} 
} 

export {FormContainer};