MUI TextField手动清空输入后自动重置为默认值0的实现方法

• 你当前写的是受控组件，defaultValue属性仅在非受控组件（不绑定value和onChange）场景下生效，这里加了不会起任何作用，输入框的显示内容完全由mynumber状态控制。
• 手动删光输入框内容时，事件拿到的e.currentTarget.value是空字符串''，直接执行parseInt('')会返回NaN，状态被设置为NaN后输入框就会保持空状态，不会自动回到初始值0。

根据你需要的交互时机二选一即可：

方案1：输入内容一清空就立刻重置为0 #

直接修改onChange逻辑，检测到空输入时直接把状态设为0即可，修改后代码如下：

<TextField
  type='number'
  InputLabelProps={{ shrink: true }}
  id='standard-basic'
  label='NUMBER (kg)'
  value={mynumber}
  onChange={(e) => {
    const inputValue = e.currentTarget.value;
    if (inputValue === '') {
      setMyNumber(0);
      return;
    }
    setMyNumber(parseInt(inputValue));
  }}
  name='MyNumber'
  variant='outlined'
/>

注意：这个方案交互偏生硬，如果用户要修改已有数值（比如把当前的15改成27），删光原有数字的瞬间输入框会直接跳成0，用户需要再删掉0才能输入新值，会打断正常输入节奏。

方案2：输入框失焦时检测为空再重置为0（更推荐） #

如果不想打断用户输入流程，可以保留输入过程中的空状态，等用户输入完成、点击其他位置（输入框失焦）时，再判断内容为空就重置为0，实际项目里大多用这种处理方式，需要额外加onBlur事件：

<TextField
  type='number'
  InputLabelProps={{ shrink: true }}
  id='standard-basic'
  label='NUMBER (kg)'
  value={mynumber}
  onChange={(e) => {
    const inputValue = e.currentTarget.value;
    // 输入过程中允许暂存空状态，不强制重置
    setMyNumber(inputValue === '' ? '' : parseInt(inputValue));
  }}
  onBlur={() => {
    // 失焦时兜底校验，空值重置为0
    if (mynumber === '') {
      setMyNumber(0);
    }
  }}
  name='MyNumber'
  variant='outlined'
/>

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