在 React 中禁用 `<input type=number>` 上的滚动

Question

之前有人问过这个问题，但提供的解决方案仅适用于jQuery，因为我在 ReactJs 中面临同样的问题。

是否可以禁用滚轮更改输入数字字段中的数字？我使用 CSS 删除了微调箭头，但鼠标滚轮仍在工作并弄乱了功能。

我想要输入类型，number因为它在移动/触摸设备上提供数字键盘。

Answer 1

您可以模糊 onWheel 处理程序上的字段。像这样的东西

<input type='number' onWheel={ event => event.currentTarget.blur() } />

Answer 2

最简单的答案：

<input type="number" onWheel={(e) => e.target.blur()} />

这也有效：

<input type="number" onWheel={() => document.activeElement.blur()} />

其中任何一个都可以在函数或类组件中使用。

Answer 3

我遇到了同样的问题，除了我只在桌面版本上工作。按照其他答案中的建议模糊输入的焦点可以停止滚动。但这不是我想要的。我仍然希望用户能够使用键盘更改输入。

因此，为了在 React 中禁用滚动，<input type=number>我添加了一个onFocus属性，如下所示：

<input
    //...some input properties...//
    type="number"
    onFocus={(e) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })}
/>

这对我来说效果很好。我希望它对其他人有帮助。