React中实现数字输入框清空后显示空而非0的方案

问题根源在于：当type为number的输入框被清空时，e.target.value是空字符串，如果你直接将其转为Number类型会得到0，导致状态被设为0，输入框因此显示0。你之前的判断逻辑错误，因为清空输入时的value是空字符串而非数字0，所以条件永远不会触发。

解决方案 #

需要修改两个核心部分：输入框的value绑定逻辑，以及onChange事件的处理逻辑，具体如下：

<CInput
  min="0"
  max={senddata?.menuItemConfigs[indexID]?.maxSelectionCount}
  name="max"
  type="number"
  placeholder="Maximum say"
  disabled={!ROLECONTROL("ROLE_MEALPER_ADMIN")}
  value={senddata?.menuItemConfigs[indexID]?.maxSelectionCountForEachOption ?? ""}
  onChange={(e) => {
    const data = { ...senddata };
    const inputValue = e.target.value;
    const maxLimit = senddata?.menuItemConfigs[indexID]?.maxSelectionCount;

    if (inputValue === "") {
      // 清空输入时，将对应字段设为空字符串
      data.menuItemConfigs[indexID].maxSelectionCountForEachOption = "";
    } else {
      const numValue = Number(inputValue);
      // 验证输入是否在允许范围内（不小于0，不超过maxLimit）
      if (numValue >= 0 && (maxLimit === undefined || numValue <= maxLimit)) {
        data.menuItemConfigs[indexID].maxSelectionCountForEachOption = numValue;
      }
    }
    setsenddata(data);
  }}
/>

逻辑说明 #

1. value绑定：使用?? ""空值合并运算符，当maxSelectionCountForEachOption为undefined、null或空字符串时，输入框显示空；如果是有效数字（包括0），则显示数字本身，保证用户主动输入0时能正常显示。
2. onChange处理：
   • 先获取输入框的原始值，若为空字符串，直接将状态字段设为空，确保输入框显示空。
   • 若为非空输入，转为数字后验证是否符合min=0和max的限制，符合条件再更新状态。

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