Как отключить прокрутку при вводе HTML-номера в React

Разработчик задал вопрос на StackOverflow с заголовком «Отключить прокрутку на `‹input type=number›`». Он спросил:

Можно ли отключить колесо прокрутки, изменяющее число в поле ввода? Я возился со специфичным для webkit CSS, чтобы удалить счетчик, но я хотел бы полностью избавиться от этого поведения. Мне нравится использовать type=number, так как он вызывает удобную клавиатуру на iOS.

Было много ответов, посвященных простым решениям JavaScript, но в наши дни большинство разработчиков интерфейса используют JS-фреймворки, такие как React. Имея это в виду, я предоставил следующее ориентированное на ReactJS решение для предотвращения прокрутки, когда пользователь перемещает колесо мыши над числовым вводом:

const MyNumberInput = () => {
  const numberInputOnWheelPreventChange = (e) => {
    // Prevent the input value change
    e.target.blur()

    // Prevent the page/container scrolling
    e.stopPropagation()

    // Refocus immediately, on the next tick (after the current     
    function is done)
      setTimeout(() => {
        e.target.focus()
    }, 0)
}

  return <input type="number" onWheel={numberInputOnWheelPreventChange}/>
}

Комментарии подробно объясняют, как это работает, поэтому я не буду повторяться здесь. Я надеюсь, что это полезно. Если у вас есть вопросы или другие решения, не стесняйтесь комментировать ниже.