ReactJS - ввод только числа с PropType, установленным в число, но инициализируемым в ноль - PullRequest
Новая
       6

ReactJS - ввод только числа с PropType, установленным в число, но инициализируемым в ноль

1 голос
/ 17 января 2020

Я использую ReactJS и создаю базовое c контролируемое поле ввода текста, в котором я хочу разрешить только цифры. Он контролируется, поэтому значением является переменная состояния, а onChange обновляет состояние. У меня также есть PropType установлен в число. Но когда я это делаю, я должен инициализировать переменную состояния на ноль, а затем поле ввода заполняется нулями. Очевидно, что это не очень удобно для пользователя. Хотите знать, если кто-нибудь знает способ обойти это. Если нет, мне просто нужно изменить PropType на строку и все будет в порядке с этим. Я нашел очень похожий вопрос и ответ, но он определен от c до Angular: AngularJS с типом, установленным на «число», как заставить начальное отображение значения в нечисловую строку

Соответствующий код:

Состояние: const [lastPalletBagCount, setLastPalletBagCount] = useState(0);

Ввод: 

<input
    type={'text'}
    className={'bag-count'}
    value={lastPalletBagCount}
    onChange={(e) =>
        setLastPalletBagCount(e.target.value)
    }
/>

Тип объекта: lastPalletBagCount: PropTypes.number.isRequired,

Ответы [ 2 ]

3 голосов
/ 17 января 2020

Вы можете сделать: 

Comp.propTypes = {
  lastPalletBagCount: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([''])
  ]).isRequired
}
0 голосов
/ 17 января 2020

Я думаю, 

  const [lastPalletBagCount, setLastPalletBagCount] = React.useState<number>();

  const handler = (e: any) => {
    console.log(e.target.value)
    const numberregex = /^[0-9\b]+$/;

    if (numberregex.test(e.target.value)) {
      var val = Number(e.target.value);
      setLastPalletBagCount(val);

    }

  }

  return (
      <input
        type={'text'}
        className={'bag-count'}
        value={lastPalletBagCount}
        onChange={(e) =>
          handler(e)
        }
      />
  );

будет работать для вас.

Но вам придется изменить значение в событии при замене на число с некоторыми логами c, потому что ваш тип ввода - строка и будет возвращать значение типа строка.

...