I don't think this is the best solution if you only want a numeric keyboard since there is a property that actually let you set whatever keyboard type you want, e.g. inputMode="numeric"

Changing global events is not good practice and neither is blurring out of the field.

Simplest answer:

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

e is short for event.

This also works:

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

Either of these can be used either in a functional or in a class component.

<input type="tel" pattern="[0-9]*" />

You can use <input type="tel" pattern="[0-9]*" /> and I don't remember seeing any scrolls, and you also get number pad on mobile devices.

You can blur the field on onWheel handler. Something like this

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

In react version you should use ref. Take a look at the example below :

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

I solved this using a functional component that wraps the input element and adds an event listener for "wheel" and prevents default behavior. I find this preferable to using blur() which may have undesirable UX.

// 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} />;
};

In production, I actually use this component to disable scroll-incrementing for the <TextField> component from material-ui instead of <input>. I've used the native input in my example because that's what the question was asking about.