如何从另一个组件接收表单数据

大家好，我正在构建一个反应天气应用程序，允许用户输入他们的城市名称，并将天气信息显示给用户。

问题是，我在表单中有输入和按钮，并且我想从另一个名为 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></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"></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;

以上是如何从另一个组件接收表单数据的详细内容。更多信息请关注PHP中文网其他相关文章！