React文本框无法输入求助：已尝试value与defaultValue仍无效

问题原因 #

你的代码存在两个核心问题：

• 误用defaultValue绑定状态：这是非受控组件的用法，状态更新后不会同步到输入框的显示值
• 内部状态与父组件props不同步：tempCity初始值为空，和传入的city props脱节，导致输入框状态逻辑混乱

修复方案 #

将defaultValue替换为value实现受控组件，并同步父组件传入的city到内部状态，修改后的代码如下：

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

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

  // 父组件city更新时同步内部状态
  useEffect(() => {
    setTempCity(city);
  }, [city]);

  return (
    <div className="weather-search">
      <h1>{city}</h1>
      <Box component="form">
        <FormControl>
          <InputLabel>City</InputLabel>
          <Input
            type="text"
            id="city-search"
            placeholder={city}
            value={tempCity} // 用value实现受控绑定
            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;

关键修改说明 #

• 受控组件绑定：MUI的Input作为受控组件时，必须通过value绑定状态，defaultValue仅适用于无需状态同步的非受控场景
• 状态同步逻辑：添加useEffect监听父组件city props的变化，确保输入框显示始终与父组件保持一致
• 初始状态对齐：将tempCity初始值设为传入的city，避免输入框初始为空的逻辑矛盾

如果之前用value={tempCity}仍未生效，可排查以下点：

• 确认setTempCity是否正确更新状态（查看控制台输出的输入值是否正常）
• 检查是否有其他代码意外修改tempCity状态
• 确认父组件changeCity方法是否会导致组件重复渲染干扰状态更新

内容的提问来源于stack exchange，提问作者joshmcculloch09