Как контролировать ввод в input?

Question

[tron21]

Всем добрый день! Стоит задача контролировать ввод в инпут. Необходимо в инпут entity дать возможность вводить только строки цифр ([0-9]) . При это если вводится что-то другое, то не перезаписывать value и не отображать в инпуте некорректный ввод. Никак не могу найти решение для моего случая. Проверка по валидности ( target.validity.valid ) тоже не подошла так как у меня есть контроль минимальной и максимальной длины. При это функция у меня универсальная на несколько инпутов, но нужно проверять только entity. Подскажите, пожалуйста, как правильно реализовать проверку на ввод [0-9] и чтобы при этом ничего другого ввести было нельзя.

Ниже укороченный пример кода

const [inputState, setInputState] = useState({title : "", entity: ""})

  const handleChangeInputValue = (event) => {
    const { target } = event;
    const { name, value } = target;
    // тут нужна проверка на ввод чисел
    setInputState({ ...inputState, [name]: value });
  };


              <input
                required
                minLength={5}
                type="text"
                placeholder="Enter name"
                name="title"
                value={inputState.title}
                onChange={handleChangeInputValue}
              />
              <input
                required
                minLength={13}
                maxLength={15}
              
                type="text"
                placeholder="Enter entity"
                name="entity"
                value={inputState.entity}
                onChange={handleChangeInputValue}
              />

Answer 1

[black1277]

примерно так

if(name==='entity' && !value.match(/^\d+$/)) return // если имя равно entity и введены не только цифры - делаем возврат из ф-и (без изменения стейта)

Comments

[tron21]

спасибо большое