最简单的答案：

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

e是event的缩写。
这也适用于：

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

这两个组件都可以用在functional或class组件中。

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

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

我也遇到了同样的问题，除了我只在桌面版本上工作。如其他答案中所建议的那样模糊输入上的焦点可以停止滚动。但这不是我想要的。我仍然希望用户能够用键盘改变输入。
因此，为了在React中禁用<input type=number>上的滚动，我添加了一个onFocus属性，如下所示：

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

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

我使用一个功能组件解决了这个问题，该组件 Package 了input元素，并为"wheel"添加了一个事件侦听器，防止了默认行为。我发现这比使用blur()更好，blur()可能有不理想的用户体验。

// Simply a wrapper for <input type="number"/> that disables scrolling to increment

import { useEffect, useRef } from "react";

export const NumberInput = (props) => {
  const quantityInputRef = useRef(null);

  useEffect(() => {
    const ignoreScroll = (e) => {
      e.preventDefault();
    };
    quantityInputRef.current && quantityInputRef.current.addEventListener("wheel", ignoreScroll);
  }, [quantityInputRef]);

  return <input ref={quantityInputRef} type="number" {...props} />;
};

在生产环境中，我实际上使用该组件从material-ui而不是<input>禁用<TextField>组件的滚动增量。我在例子中使用了本机输入，因为这就是问题所问的。

我不认为这是最好的解决方案如果你只想要一个数字键盘，因为有一个属性，实际上可以让你设置任何你想要的键盘类型，例如。inputMode="numeric"
改变全球事件不是好的做法，也不是模糊的领域。

在react版本中，您应该使用ref。看看下面的例子：

import React, { Component, createRef } from "react";

class MyInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

  onWheel = () => {
    this.inputRef.current.blur();
  };

  render() {
    return (
      <div>
        My input number :
        <input type="number" ref={this.inputRef} onWheel={this.onWheel} />
      </div>
    );
  }
}

export default MyInput;

codesandbox here

防止onWheel事件

docs
example in react

onWheel={e=> e.preventDefault()}

• 在React代码中

export default function App() {
 return (
  <div className="App">
   <form>
    <input
     type="number"
     placeholder="type num"
     // prevent scroll on number input
     onWheel={(event) => {
      event.preventDefault();
     }}
   />
   <button type="submit">send</button>
  </form>
 </div>
);
}

这也可以使用CSS来实现。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button
{ 
  -webkit-appearance: none; 
  margin: 0; 
}