如何处理打字稿中的数字输入？

Question

这是在value是字符串类型的react / typescript中如何处理常规输入字段的方法：

const [value, onChange] = useState<string>('');

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value);
}

return (
  <input
    value={value}
    onChange={onChange}
  />
);

但是我输入的数字类型是麻烦的：

const [value, onChange] = useState<number>();

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  // type error
  setValue(e.target.value);
}

return (
  <input
    type="number"
    value={value}
    onChange={onChange}
  />
);

在这种情况下，值是数字类型，输入是数字类型（因此，e.target.value应该始终是数字类型。但是根据打字稿，event.target.value总是字符串。我可以将其转换为数字，即。

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(Number(e.target.value));
}

但是现在如果键入一些数字，并且用户将其退格以使其为空，则该值将更改为0-该字段永远不能为空。

将值保留为字符串，然后在保存时将其强制转换为数字不是可行的解决方案

我暂时做的是将e.target.value设置为任意值：

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value as any);
}

这很好用，但我是否缺少确保这种类型安全的东西？

Answer 1

通常，您希望将变量设置为字符串，以使一切正常工作。

然后，当您要将其用作数字时，请在那一点进行转换。您可以使用+value或parseFloat(value)]等轻松地将其转换为数字

输入出于某种原因使用字符串类型。这样，您就可以保持打字稿所提供的类型安全性。