ReactJS / Typescript / Redux - 带有数据类型编号和逗号值的 onChange 事件

Question

the following situation: I have a reactjs/redux/typescript application.

I have a two way binding with redux for my input textboxes with the onChange event. The props are all declared with the datatype "number". Everything works as expected.

The only problem i have is when i want to type in comma seperated values i cannot store it as number in my redux store. It seems that it will store it as string and not as number but i want to store it as number.

My input box looks like this:

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

with the +e.target.value i convert the string value from the input field to a number, because i expect a number and nothing else. But i want also that ive been able to put in a comma seperated value.

The problem is that because of the onChange event the comma value cannot be stored because when i try to type in for example "1.1" on the second character "1." this is not a number.

For better understanding i created a codesandbox example:

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

My question: What is the best/smartest way to handle this situation? I dont want to store the values as String, because it is not a string.

Thanks in advance for your help and for all ideas.

Answer 1

Just set the <input type="number" /> , it's also better for UX and makes more sense semantically.

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

Demo:https://codesandbox.io/s/create-react-app-with-typescript-bu305