Question

我正在创建天气应用。我有一个“搜索”组件，用于（我的表单，axios），并且在此组件中，我将数据存储为状态。当我提交此表单时，我想用下一个组件加载另一个页面..我的问题是我如何使用其他组件中的“搜索组件”中的数据在表单提交时加载？

因此，基本上我想提交表单，然后使用天气组件重新加载另一个页面，然后将数据从搜索移动到天气组件。在天气组件中，a将设置我的背景和其他数据

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

在另一个组件中反应使用状态

0 个答案: