javascript 在Primereact输入编号中禁用键Up/Down支持

yruzcnhs  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(129)

有没有办法从primereact输入Nubmer中删除默认的KeyUp/KeyDown事件列表; Ps:我希望事件被父x1c 0d1x传播和处理

shyt4zoc

shyt4zoc1#

要禁用Primereact InputNumber组件中的默认keyUp/Down事件侦听器,可以使用onKeyDown事件处理程序来阻止默认行为。下面是一个例子:

import React, { KeyboardEvent } from "react";
import { InputNumber } from "primereact/inputnumber";

interface ICustomInputNumberProps {
  // Any additional props you want to pass
}

const CustomInputNumber: React.FC<ICustomInputNumberProps> = (props) => {
  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    // Prevent the default behavior of keyUp and keyDown
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      event.preventDefault();
    }
  };

  return <InputNumber {...props} onKeyDown={handleKeyDown} />;
};

export default CustomInputNumber;

在此代码中,创建了一个名为CustomInputNumber的自定义组件,它 Package 了Primereact InputNumber组件。handleKeyDown函数是onKeyDown事件的事件处理程序,它检查按下的键是“ArrowUp”还是“ArrowDown”(通常用于递增和递减输入值)。如果键匹配,则调用event.preventDefault()以防止默认行为。
然后,您可以在父组件中使用CustomInputNumber组件,而不是默认的Primereact InputNumber,并且keyUp/Down事件将被禁用,同时仍由父组件传播和处理。

相关问题