다른 구성 요소에서 양식으로 데이터를 받는 방법

안녕하세요 여러분. 저는 사용자가 도시 이름을 입력하면 날씨 정보가 사용자에게 다시 표시되는 반응형 날씨 앱을 만들고 있습니다.

문제는 양식에 입력과 버튼이 있는데 WeatherApp이라는 다른 구성 요소에서 데이터를 받고 싶다는 것입니다.

두 구성요소를 어떻게 연결하나요

양식 구성요소

import '../App.css';
import Input from './Input';
import Button from './Button';
import { useState } from 'react';

const Form = ({handleQueryChange}) => {
    const [city, setCity] = useState('')

    const handleChange = (e) => {
        setCity(e.target.value)

    }

    const handleSubmit  = (e) => {
        e.preventDefault();
        handleQueryChange(city);

    }

    return (  
    <div>
        <form className="inputForm" onSubmit={handleSubmit}>
       <Input value={city} onChange={handleChange} />
       <Button/>
        </form>

    </div>);
}

export default Form;

그리고 날씨 앱 구성요소

import React from 'react';
import { BrowserRouter,  Routes,Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { WiDaySunny,WiCloud, WiNightCloudy,WiHumidity, WiNightClear } from 'react-icons/wi';
import Layout from './Layout';
import Home from './Home';
import Minutecast from './Minutecast';
import Hourly from './Hourly';
import Today from './Today';
import '../App.css';


const WeatherApp = () => {
const [data, setData] = useState([]);
const [query, setQuery] = useState('Accra');

const handleQueryChange = (data) => {
    setQuery(data.location.name);

}

const getWeatherIcons = (description) =>{
    switch(description.toLowerCase()) {
        case 'sunny':
            return <WiDaySunny size='100px'/>;
        case 'cloud':
                return <WiCloud  size='100px'/>;
        case 'clear':
                return <WiNightClear size='100px'/>;
        case 'partly cloudy':

                return <WiNightCloudy size='150px' color='blue' />;
        default:
                return <WiDaySunny color='red' size='100px' />;

    }
}

const convertToWhole = (tem) =>{
  const whole = Math.trunc(tem);
  return whole;


}

useEffect(()=>{

const fetchWeatherData = async () => {
  try {
    const response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=95f0ddb3a06a4a358cf223933242311&q=${query}&days=10&aqi=yes&alerts=no`);
    const result = await response.json();
    setData(result);

  console.log(result);
  } catch (error) {
    console.error("Error fetching weather data:", error);
  }

};
fetchWeatherData();
}, [data]);



    return ( <>
    <div className="formContainer">
    {/* <Form onSubmit={handleQueryChange} /> */}
    </div>
    <BrowserRouter>
    <Routes>
       <Route path ='/'  element={< Layout />}>
       <Route index element={<Home  data={data} getWeatherIcons={getWeatherIcons} convertToWhole={convertToWhole}/>} />
       <Route path='minutecast' element={<Minutecast />}/>
       <Route path='hourly' element={<Hourly data={data} convertToWhole={convertToWhole}/>}/>
       <Route path='today'element={<Today data={data} />}/>
     </Route>
     </Routes>
   </BrowserRouter>

    </>
    )

}

export default WeatherApp;

위 내용은 다른 구성 요소에서 양식으로 데이터를 받는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!