ReactJS数字输入框输入受限、删除异常、出现NaN问题求解

问题现象 #

实现了绑定数字类型状态EC的数字输入框，支持直接输入数值、点击+/-按钮每次增减1000两种交互，目前+/-按钮功能正常，输入框存在以下异常：

• 按下键盘删除键时，初始值2000末尾的"000"会被一次性全部删除
• 输入框内无法输入超过4位的数字
• 清空输入框所有内容后会显示"NaN"，之后无法再输入任何内容

已尝试的无效方案 #

• 将input的type属性设置为number
• 将值处理逻辑直接写在onChange回调中
• 使用Number()替代parseInt()做数值类型转换

问题复现代码 #

function Resistance() {
  const [EC, setEC]= React.useState(2000)

  function handlePressEC() {
    const testEC=EC-1000
    if(testEC<=0) {
      setEC(0)
    }
    else {
      setEC(testEC)
    }
  }

  function handleChangeEC(e) {
    const EC = parseInt(e.target.value)
    setEC(EC)
    console.log(EC)
  }

  return (
    <div>
      <div className='flexLigneOF flexLigneV'>
        <div className='textOF'>Economie de charge</div>
        <div className='flexSaisie'>
           <button className='buttonPM' onClick={handlePressEC} > 
              <div className='TextPM'> - </div>
           </button>
           <input className='inputResi'value={EC.toLocaleString().toString()} onChange={handleChangeEC} keyboardType='number-pad'/>
           <button className='buttonPM' onClick={() => {setEC(parseInt(EC)+1000)}}> 
             <div className='TextPM'> + </div>
          </button>
      </div>
     </div>
    </div>
  );
}

export default Resistance;

根因分析 #

三个异常全部来自输入框值绑定和解析逻辑的问题：

1. 渲染输入框时直接给value绑定了EC.toLocaleString()的返回值，数值2000在默认环境下调用该方法会返回带千分位逗号的字符串"2,000"。按下删除键删除到逗号位置时，parseInt("2,")遇到非数字逗号会终止解析，直接返回数字2，状态更新后输入框值变为2，视觉上表现为末尾三个0被一次性删除。
2. 千分位逗号会持续打断parseInt的解析逻辑：当尝试输入第五位数字时，输入框临时字符串会变成类似"2,0000"的格式，parseInt遇到逗号就停止解析，返回值始终是2000，状态不会更新，因此无法输入超过4位的数字。
3. 全选删除输入框内容时，e.target.value为空字符串，parseInt("")会直接返回NaN，将NaN设置为状态值后，调用NaN.toLocaleString()会返回字符串"NaN"，后续输入的任何内容拼接在"NaN"后再被parseInt解析仍然返回NaN，输入框彻底锁死无法输入。

额外问题：代码中写的keyboardType是React Native的属性，web端React下不生效，无法唤起移动端数字键盘。

修复代码 #

修复点包括：输入框直接绑定原始数值状态、输入时先过滤所有非数字字符、空输入做边界处理避免出现NaN、使用web端标准的inputMode和type=number限制输入类型、拆分+/-按钮逻辑避免重复写解析代码。

function Resistance() {
  const [EC, setEC]= React.useState(2000)

  function handleMinusEC() {
    const testEC = EC - 1000
    setEC(testEC <= 0 ? 0 : testEC)
  }

  function handlePlusEC() {
    setEC(EC + 1000)
  }

  function handleChangeEC(e) {
    // 过滤所有非数字字符，空值直接置0，避免NaN
    const pureNumStr = e.target.value.replace(/\D/g, '')
    setEC(pureNumStr === '' ? 0 : parseInt(pureNumStr, 10))
  }

  return (
    <div>
      <div className='flexLigneOF flexLigneV'>
        <div className='textOF'>Economie de charge</div>
        <div className='flexSaisie'>
           <button className='buttonPM' onClick={handleMinusEC} > 
              <div className='TextPM'> - </div>
           </button>
           <input 
            className='inputResi'
            type="number"
            value={EC}
            onChange={handleChangeEC}
            inputMode='numeric'
          />
           <button className='buttonPM' onClick={handlePlusEC}> 
             <div className='TextPM'> + </div>
          </button>
      </div>
     </div>
    </div>
  );
}

export default Resistance;

如果需要保留千分位展示效果，可以在输入框失焦时做格式化，聚焦输入时切回纯数值，避免输入过程中千分位符号打断解析逻辑。

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