首页 > web前端 > js教程 > 如何从另一个组件接收表单数据

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

Linda Hamilton
发布: 2025-01-14 22:29:48
原创
595 人浏览过

How to receive data in form from another component

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

问题是,我在表单中有输入和按钮,并且我想从另一个名为 WeatherApp 的组件接收数据。

如何链接这两个组件

表单组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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;

登录后复制

和天气应用组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板