在 Fetch 语句中获取 React Js 中的用户输入

Question

我创建了一个从 api 获取天气数据的代码。在链接中，我给出了一个地方 q=chennai。我需要更改此地点字段取决于用户。那就是我想从用户那里得到这个位置。我如何使用 react 来做到这一点

import React,{useState,useEffect} from 'react';

const Home1=()=>{
    const[info,setInfo]=useState({
        name:"loading !!",
        temp:"loading",
        humidity:"loading",
        desc:"loading",
    })
    useEffect(()=>
    {
        getWeather()
    })
    const getWeather=()=>
    {
        fetch('http://api.openweathermap.org/data/2.5/weather?q=chennai&appid=bd2d67a73f2dc8279......')
        .then(data=>data.json())
        .then(results=>{
           //console.log(results)
           setInfo({
               name:results.name,
               temp:results.main.temp,
               humidity:results.main.humidity,
               desc:results.weather[0].description,
           })
        })
    }

    return(
        <div>
            <h1>Weather API</h1>
            <div>
                 Place:{info.name} <br/>
                 Temperature:{info.temp} <br/>
                 Humidity:{info.humidity} <br/>
                 Description: {info.desc}
            </div>
        </div>
    )
}

export default Home1;```

Can somebody help me to do this ?

Answer 1

您必须从用户那里获取输入并编写一个 onChange 事件处理程序。获得输入后，您可以调用 getWeather 函数并将您从用户那里获得的值传递给该函数。这是解决方案-

import React,{useState,useEffect} from 'react';

const Home1=()=>{
    const[info,setInfo]=useState({
        name:"loading !!",
        temp:"loading",
        humidity:"loading",
        desc:"loading",
    })

    const [inputValue , setInputValue] = useState("");
    useEffect(()=>
    {
        getWeather("chennai")
    })
    const getWeather=(value)=>
    {
        fetch(`http://api.openweathermap.org/data/2.5/weather?q=${value}&appid=bd2d67a73f2dc8279......`)
        .then(data=>data.json())
        .then(results=>{
           //console.log(results)
           setInfo({
               name:results.name,
               temp:results.main.temp,
               humidity:results.main.humidity,
               desc:results.weather[0].description,
           })
        })
    }

  const handleInputChange = event =>{
        let inputValue = event.target.value;
        console.log(event.target.value); // You will the value here. you can simply pass the value to the function
        setInputValue(inputValue);
        getWeather(inputValue);
    }

    return(
        <div>
            <h1>Weather API</h1>
            <div>
                 Place:{info.name} <br/>
                 Temperature:{info.temp} <br/>
                 Humidity:{info.humidity} <br/>
                 Description: {info.desc}
                 <input type="text" value={inputValue} onChange={handleInputChange} />
            </div>
        </div>
    )
}

export default Home1;

Answer 2

您可以使用受控输入为用户提供选择位置的可能性。

const [city, setCity] = useState("chennai") // Initialize city default value

...

useEffect(()=> { getWeather(city) }, [city])
// Add the city as dependency to your effect and pass the value to getWeather method

...

fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=bd2d67a73f2dc8279......`)
// Make the url to fetch a template string so you can inject the city state in it

...

<input type="text" value={city} onChange={(e) => setCity(e.target.value)} />
// Add the input with onChange method

如果您想了解更多关于 React 中受控输入的信息，请参阅文档相关页面 https://reactjs.org/docs/forms.html