反应文本框不接受输入

Question

我有一个正在使用 React 进行的家庭项目。我有一个非常基本的组件，它呈现一个文本框并调用传入的方法。问题是，当我运行代码时，我无法在文本框中输入内容。

我尝试使用 value={tempCity} & defaultValue={tempCity} ；与其他帖子的修复一样，但对我来说都不起作用。

我的班级：

import { Box, Input, InputLabel, Button, FormControl } from "@mui/material";
import React from "react";
import { useState } from "react";

const WeatherCitySearch = ({ city, changeCity }) => {
  const [tempCity, setTempCity] = useState("");

  return (
    <div className="weather-search">
      <h1>{city}</h1>
      <Box component="form">
        <FormControl>
          <InputLabel>City</InputLabel>
          <Input
            type="text"
            id="city-search"
            placeholder={city}
            defaultValue={tempCity}
            onChange={(e) => {
              console.log("TYPING!!! ", e.target.value);
              setTempCity(e.target.value);
            }}
          />
        </FormControl>
        <Button variant="contained" onClick={() => changeCity(tempCity)}>
          Search
        </Button>
      </Box>
    </div>
  );
};
export default WeatherCitySearch;

Answer 1

我在沙箱上尝试了你的代码，它工作得很好（在文本框中输入），也许尝试使用它，看看你有什么不同。