ReactJS / Typescript / Redux - событие onChange с номером типа данных и значениями запятой

Question

следующая ситуация: у меня есть приложениеactjs / redux / typescript.

У меня есть двухстороннее связывание с redux для моих входных текстовых полей с событием onChange. Все реквизиты объявлены с типом данных "число". Все работает как положено.

Единственная проблема, с которой я сталкиваюсь, - это когда я хочу ввести значения, разделенные запятыми, я не могу сохранить их как число в моем хранилище с избыточностью. Кажется, он будет храниться как строка, а не как число, но я хочу сохранить его как число.

Мой блок ввода выглядит следующим образом:

<input
value={props.number || ""}
onChange={e => props.updateValue({ number: +e.target.value })}
/>

с +e.target.value iпреобразовать строковое значение из поля ввода в число, потому что я ожидаю число и ничего больше. Но я хочу также, чтобы я был в состоянии разделить запятую.

Проблема в том, что из-за события onChange значение запятой не может быть сохранено, потому что, когда я пытаюсь ввести, например, «1.1» для второго символа «1». это не число.

Для лучшего понимания я создал пример кода и коробки:

https://codesandbox.io/s/create-react-app-with-typescript-xt2tc?fontsize=14

Мой вопрос: что лучше /самый умный способ справиться с этой ситуацией? Я не хочу хранить значения как String, потому что это не строка.

Заранее спасибо за помощь и за все идеи.

Answer 1

Просто установите <input type="number" />, это также лучше для UX и имеет смысл семантически.

  <input
    type="number"
    value={props.number || ""}
    onChange={e => props.updateValue({ number: +e.target.value })}
  />

Демо: https://codesandbox.io/s/create-react-app-with-typescript-bu305