react输入字段未使用onClick事件更新useState

Question

输入字段未更新城市使用状态。我也试过提交，但结果是更多的错误。有时，当我按下提交按钮时，useEffect会刷新整个页面。

    // using State for updating city 
    const [City, setCity] = useState();
// this function will fetch the data from Weather API, using useEffect 
    useEffect(() => {
        console.log("updating data" );
    }, [City] )
function CitySearch() {
        console.log(City);  
    }
                // taking input and updating the city, button using the city search function.
                // problem: city not updating !
    return (
       <div>
           <form>
                <input onClick={Event => setCity(Event.target.value)} placeholder="Enter city name"/>
                <button className="search-btn" type="submit" onClick={CitySearch} >Search</button>
           </form> 
        </div>

    )

Answer 1

您应该在这里使用onChange来读取输入，onClick用于单击处理。

                <input onChange={Event => setCity(Event.target.value)} placeholder="Enter city name"/>

为了停止重新加载表单submit，您可以在事件上使用preventdefault，但不能确切地确定在搜索上调用submit api之后您在做什么。