React受控TextField无法重置为空字符串问题求助

核心原因 #

1. 状态更新逻辑错误：你的handleRequirementChange函数里存在变量名冲突（const requirement = [...requirement]），且直接将数组中的对象元素替换为val（字符串/数字），破坏了原有对象结构（原本每个元素是带val属性的对象）。后续渲染时requirement.val会变成undefined，导致组件无法正确绑定状态值。
2. 类型不兼容：TextField设置了type="number"，但你将无效值设为空字符串''。原生number类型输入框在受控模式下，仅接受数字或null作为有效值，空字符串会被浏览器忽略，导致输入框显示与状态不一致。
3. min/max属性的局限性：通过InputProps.inputProps传入的min/max仅限制原生输入框的上下箭头操作，无法阻止用户手动输入负数、符号或超出范围的数值，必须手动处理输入内容。

解决步骤 #

1. 修正状态更新逻辑，保留对象结构 #

确保拷贝状态数组时使用独立变量名，仅修改对象的val属性，而非替换整个元素：

const handleRequirementChange = (val, index) => {
  // 拷贝状态数组，避免直接修改原状态
  const updatedRequirements = [...requirements];
  // 处理无效值：NaN（如输入'-'）或<=0时设为null
  const processedVal = isNaN(val) || val <= 0 ? null : val;
  // 更新对应元素的val属性，保持对象结构不变
  updatedRequirements[index] = {
    ...updatedRequirements[index],
    val: processedVal
  };
  setRequirements(updatedRequirements);
};

2. 适配number类型输入框的有效值 #

将空状态从''改为null，同时在TextField中做兼容处理，确保空值正确显示：

<TextField
  disabled={!!requirement.id}
  type="number"
  // 当val为null时，传入空字符串保证输入框显示为空
  value={requirement.val ?? ''}
  variant="outlined"
  InputProps={{ inputProps: { min: 1, max: 1000000 } }}
  placeholder={'请输入数值'}
  onInput={(e) => {
    const inputValue = e.target.value;
    // 原始值转数字，空字符串或'-'会转为NaN
    const numVal = Number(inputValue);
    handleRequirementChange(numVal, index);
  }}
/>

3. 优化输入过滤逻辑（可选） #

直接处理输入框的原始字符串，更精准地拦截无效输入：

onInput={(e) => {
  const inputValue = e.target.value;
  let processedVal = null;
  // 仅保留有效正数字
  if (inputValue && inputValue !== '-') {
    const num = Number(inputValue);
    if (!isNaN(num) && num > 0) {
      processedVal = num;
    }
  }
  handleRequirementChange(processedVal, index);
}}

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