Проверка с помощью атрибута
pattern срабатывает непосредственно перед отправкой формы. Кроме того, это не запретит ввод символов, отличных от цифр, а лишь покажет уведомление в случае несоответствия. Вашу же задачу можно решить несколькими способами.
Первый вариант:
<input type="number" />. Из особенностей: он допускает ввод некоторых символов, отличающихся от цифр (например, "+" и "e").
Второй вариант: перехватывать событие
onChange у поля ввода:
const [value, setValue] = useState('')
const handleInputChange = (e) => {
setValue(e.target.value.replace(/\D/g, ''))
}
<input value={value} onChange={handleInputChange} />
