如何禁用PrimeReact Input Number的KeyUp/KeyDown支持

PrimeReact InputNumber组件默认内置了KeyUp/KeyDown事件逻辑来处理数字输入（比如上下箭头增减数值、限制输入字符等），如果想让这些事件向上冒泡并交给父组件处理，可以通过以下两种方式实现：

• 方式一：通过组件属性覆盖并阻止内部默认处理
  直接在InputNumber组件上绑定onKeyUp或onKeyDown事件，在回调中阻止组件内部的事件处理逻辑，同时保留事件的冒泡行为：

  <InputNumber
    onKeyDown={(e) => {
      // 阻止组件内部对KeyDown事件的默认处理（比如箭头增减数值）
      e.stopImmediatePropagation();
      // 事件会自动向上冒泡，父组件可以正常监听该事件
    }}
    onKeyUp={(e) => {
      e.stopImmediatePropagation();
    }}
  />
  

  注：stopImmediatePropagation()会阻止同一元素上后续绑定的监听器执行，这样组件内部的默认事件处理就不会触发，而事件仍会向上传递给父组件。

• 方式二：自定义封装组件（更彻底的方案）
  如果需要全局禁用InputNumber的默认键盘事件逻辑，可以封装一个自定义组件，完全接管键盘事件：

  import { InputNumber } from 'primereact/inputnumber';
  
  const CustomInputNumber = (props) => {
    const handleKeyDown = (e) => {
      // 优先执行父组件传入的事件回调
      if (props.onKeyDown) props.onKeyDown(e);
      // 阻止组件内部默认处理
      e.stopImmediatePropagation();
    };
  
    const handleKeyUp = (e) => {
      if (props.onKeyUp) props.onKeyUp(e);
      e.stopImmediatePropagation();
    };
  
    return <InputNumber {...props} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} />;
  };
  

  之后直接使用CustomInputNumber代替原生的InputNumber即可。

需要注意的是，移除默认键盘事件后，InputNumber原本的键盘交互逻辑（比如箭头增减、输入限制）会失效，这些逻辑需要由父组件自行实现。

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