我试图制作一个简单的 React 天气应用程序，它工作正常但不正确，因为在添加 Material-ui 按钮之前它工作正常，现在只有当我单击 Enter 而不是单击按钮时它才工作，因为 Material-ui const city = e.target.elements.city.value; 此代码根本不起作用 这里的表单组件就像

  return (
    <div>
      <form onSubmit={props.getWeather}>
        <p>Just type the city name </p>
        <p className="check">you must spelling correctly</p>

        <TextField
          id="standard-basic"
          name="city"
          placeholder="City....."
          variant="outlined"
        />
        <Button onClick={props.getWeather} variant="contained" color="primary">
          find
        </Button>
      </form>
    </div>
  );
};

export default Form;

在应用程序组件中

getWeather = async e => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const api = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
    );
const data = await api.json();