Reactのinput type="number"でintegerのみに制限させるには？

inputで整数のみを入力させるのは意外と面倒

<input
  type="number"
  value={value}
  onChange={(event) => {
    console.log("event:", event)
    event.target.value
  }}
/>

この状態で. eを打ってもまずeventが飛んでこないので、制御のしようがない。

なので、例えこういう感じで強制しても、

<input
  type="number"
  value={value}
  onChange={(event) => {
    console.log("event:", event)
    setValue(`${parseInt(event.target.value)}`)
  }}
/>

10.とか全然出来る。（整数ではあるが、絶対使う側から「なんで？」って言われる）

解決方法

onChangeだとキー入力の補足が出来ないので、onKeyDownを併用する。

import React from "react"
interface Props {}

const ALLOWED = ["-", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Backspace"]

const test: React.FC<Props> = (props) => {
  const [value, setValue] = React.useState("")
  return (
    <input
    type="number"
    value={value}
    onChange={(event) => {
      const newValue = parseInt(event.target.value)
      if (isNaN(newValue)) {
        event.preventDefault()
        return
      }

      setValue(`${newValue}`)
    }}
    onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key.match(/\d/)) return
      if (ALLOWED.includes(event.key)) return

      // e . その他は無効
      event.preventDefault()
    }}
  />
)
}
export default test