Cara menerima data dalam bentuk daripada komponen lain

Helo semua, saya sedang membina apl cuaca bertindak balas di mana pengguna dibenarkan memasukkan nama bandar mereka dan maklumat cuaca dipaparkan semula kepada pengguna.

Masalahnya ialah, saya mempunyai input dan butang dalam borang, dan saya mahu menerima data daripada komponen lain yang dipanggil WeatherApp.

bagaimana cara saya memautkan kedua-dua komponen

komponen bentuk

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></button>
        </form>

    </div>);
}

export default Form;

dan komponen aplikasi cuaca

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"></widaysunny>;
        case 'cloud':
                return <wicloud size="100px"></wicloud>;
        case 'clear':
                return <winightclear size="100px"></winightclear>;
        case 'partly cloudy':

                return <winightcloudy size="150px" color="blue"></winightcloudy>;
        default:
                return <widaysunny color="red" size="100px"></widaysunny>;

    }
}

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}"></form> */}
    </div>
    <browserrouter>
    <routes>
       <route path="/" element="{<" layout></route>}>
       <route index element="{<Home" data="{data}" getweathericons="{getWeatherIcons}" converttowhole="{convertToWhole}/">} />
       <route path="minutecast" element="{<Minutecast"></route>}/>
       <route path="hourly" element="{<Hourly" data="{data}" converttowhole="{convertToWhole}/">}/>
       <route path="today" element="{<Today" data="{data}"></route>}/>
     </route>
     </route></routes>
   </browserrouter>

    >
    )

}

export default WeatherApp;

Atas ialah kandungan terperinci Cara menerima data dalam bentuk daripada komponen lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!