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

Question

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

我通过 onChange 事件与 redux 进行了两种方式的输入文本框绑定(bind)。这些 props 都是用数据类型“number”声明的。一切都按预期进行。

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

我的输入框是这样的:

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

使用+e.target.value我将输入字段中的字符串值转换为数字，因为我期望一个数字而不是其他。但我还希望我能够输入逗号分隔的值。

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

为了更好地理解，我创建了一个codesandbox示例:

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

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

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

Answer 1

只需设置 <input type="number" /> ，它对于用户体验也更好，并且在语义上更有意义。

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

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