Почему использование шаблона не дает ожидаемого результата при вводе данных?

Использование шаблона не всегда дает ожидаемый результат при вводе данных, так как они могут не соответствовать формату данных, который вы хотите получить. Например, если вы хотите разрешить только цифры вводиться в поле, а пользователь вводит буквы, шаблон может не сработать.

Для того чтобы правильно настроить ввод данных и разрешить только цифры в React, вы можете использовать обработчик событий onChange для инпута и проверять каждый символ, который пользователь вводит. Например, вы можете использовать регулярное выражение для проверки, что введенный символ является цифрой. Кроме того, вы также можете ограничить максимальную длину ввода или выводить сообщение об ошибке, если пользователь пытается ввести что-то отличное от цифр.

Пример кода:

```jsx
import React, { useState } from 'react';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    const onlyNums = value.replace(/[^0-9]/g, ''); // Оставляем только цифры

    setInputValue(onlyNums);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange}
    />
  );
};

export default App;
```

Таким образом, можно создать валидацию для ввода данных и разрешить только цифры, обеспечивая корректный пользовательский опыт.

UPD: возможно, вы  ищете input masc? Когда допустим надо ввести номер телефона, в поле ввода маска 
 +7 (___) ___-__-__ 
 И она заполняется цифрами при вводе? 
 Тогда так в гугле  и ищите: input masc js 
 
 ___ 
 Я знаю, что вам нужно. 
 Это, правда, jQuery, но, думаю, принцип понятен. 
 
$(document).on('change', 'input[pattern]', function() {
	var re = new RegExp($(this).attr('pattern'), 'g');
	var newVal = '';
	for (i in m = $(this).val().match(re)) {
		newVal += m[i];
	}
	$(this).val(newVal);
});
 
 Пример работы здесь (где вход или регистрация).