Реагировать на использование состояния в другом компоненте - PullRequest
Новая
       21

Реагировать на использование состояния в другом компоненте

0 голосов
/ 20 июня 2020

Я создаю погодное приложение. У меня есть компонент поиска для (моя форма, ax ios), и в этом компоненте я храню свои данные в состоянии. Когда я отправляю эту форму, я хочу загрузить ДРУГОЙ СТРАНИЦУ со следующим компонентом ... и мой вопрос в том, как я могу использовать данные из 'компонента поиска' в другом компоненте, который будет загружен, когда форма отправит

Итак, в основном Я хочу отправить свою форму, затем перезагрузить другую страницу с помощью компонента погоды, а затем я хочу переместить свои данные из поиска в компонент погоды. В компоненте "Погода" устанавливается фон и другие данные 

import React, { Component } from 'react';
import axios from 'axios';


const KEY = 'fdc0a9d5321ee73e70535ed7d7e052ce'


class Search extends Component {
    state = {
        value: null,
        city: null,
        temp: null
    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        })
    }
    onSubmit = e => {
        e.preventDefault()
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.state.value}&appid=${KEY}&units=metric`)
            .then(res => {
                this.setState({
                    city: this.state.value,
                    temp: res.data.main.temp
                })
                console.log(this.state)
            })
    }

    render() {
    return (
       
            <div className="Search">
                 <form onSubmit={this.onSubmit}>
                    <input onChange={this.onChange}></input>
                    <button>Submit</button>
                 </form>
                 
            </div>
        
    )
}
}
export default Search

import React from 'react';


const Weather = () => {
        
    
    return (
        <div>
           <h1>Lorem</h1>
        </div>
    )
}

export default Weather
...