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

2024-05-14 • 问答

以下情况：我有一个reactjs / redux / typescript应用程序。

对于具有onChange事件的输入文本框，我有两种与redux绑定的方法。道具全部以“数字”数据类型声明。一切正常。

我唯一的问题是当我想输入逗号分隔的值时，我无法将其作为数字存储在我的redux存储中。看来它将存储为字符串而不是数字，但我想将其存储为数字。

我的输入框如下：

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

使用+e.target.value会将字符串值从输入字段转换为数字，因为我希望使用数字而不是其他任何东西。但是我也希望我能够输入逗号分隔的值。

问题在于，由于onChange事件，逗号值无法存储，因为当我尝试在第二个字符“ 1”上键入“ 1.1”时。这不是数字。

为了更好地理解，我创建了一个codeandbox示例：

我的问题：处理这种情况的最好/最聪明的方法是什么？我不想将值存储为String，因为它不是字符串。

在此先感谢您的帮助和所有想法。