無法輸入文本框或單擊反應按鈕

Question

由於某種原因，我根本無法再點擊我的輸入文本框或按鈕。 當我為元素設計樣式時它壞了。 當我第一次加載頁面時，自動對焦屬性仍然有效，但當我嘗試單擊按鈕或重新輸入文本框時，它就不起作用了。

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

function Header() {

    const [text, setText] = useState("");

    function handleChange(event) {
        setText(event.target.value);
    }

    function handleClick() {
        const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid=feab629ddad64dc21d6412ebae467d79"
        function getCoordinates(url) {
            axios.get(url).then((response) => {
                const locationLat = response.data[0].lat;
                const locationLon = response.data[0].lon;
                console.log(locationLat, locationLon);
            });
        } 
        getCoordinates(geoCoderURL);        
    }

    return (
        <div className="header">
            <h1 className="headerTitle">Five Day Forecast</h1> 
            <input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter city name here."/>
            <button type="submit" onClick={handleClick}>Forecast</button> 
        </div>
    )
}

export default Header;

Answer 1

檢查這個。 這是沙盒鏈接

import React, { useState } from "react";
import axios from "axios";

function Header() {
  const [text, setText] = useState("");
  const [locationLat, setlocationLat] = useState("");
  const [locationLon, setlocationLon] = useState("");

  function handleClick() {
    console.log(text);
    axios.get(
        `https://api.openweathermap.org/geo/1.0/direct?q=${text}&limit=5&appid=feab629ddad64dc21d6412ebae467d79`
      )
      .then(function (response) {
        setlocationLat(response.data[0].lat);
        setlocationLon(response.data[0].lon);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  function handleInput(e) {
    setText(e.target.value);
  }

  return (
    <div className="header">
      <h1 className="headerTitle">Five Day Forecast</h1>
      <input
        onChange={handleInput}
        type="text"
        name="name"
        autoFocus
        placeholder="Enter city name here."
      />
      <button onClick={handleClick}>Forecast</button>
      <p>{locationLat}</p>
      <p>{locationLon}</p>
    </div>
  );
}

export default Header;

撤銷API Key或APP ID，不要公開發布