React中禁用输入框ArrowUp与ArrowDown按键的实现方法求助

完全可行，你的代码核心问题在于**onKeyPress事件不会捕获ArrowUp、ArrowDown这类非打印按键**，这类方向键需要通过onKeyDown或onKeyUp事件来监听。

修正后的实现代码 #

function handleKeyDown(e) {
  // 拦截ArrowUp和ArrowDown按键，阻止默认的数值修改行为
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    e.preventDefault();
  }
  // 保留你原本需要的数字输入验证逻辑（按需保留）
  else if (!/[0-9]/.test(e.key)) {
    e.preventDefault();
  }
}

<input
  type="text"
  onKeyDown={(e) => handleKeyDown(e)}
/>

关键细节说明 #

• 事件选择：方向键、功能键这类非打印按键只会触发onKeyDown/onKeyUp事件，不会触发onKeyPress，所以必须换用前者才能监听到目标按键。
• 精准拦截：直接判断e.key为ArrowUp或ArrowDown时调用e.preventDefault()，就能阻止浏览器默认的输入框数值增减行为。
• 数字验证兼容：如果需要限制输入仅为数字，可在同一个处理函数中补充非数字字符的拦截逻辑，无需拆分多个事件处理。

额外优化（针对number类型输入框） #

如果你的输入框是type="number"类型，除了拦截方向键，还可以禁用滚轮修改数值：

function handleWheel(e) {
  e.preventDefault();
}

<input
  type="number"
  onKeyDown={handleKeyDown}
  onWheel={handleWheel}
/>

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