reactjs - 如何处理 typescript 中的数字输入？

Question

这是在 react/typescript 中处理常规输入字段的方式，其中 value是类型字符串:

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

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

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

但是我在输入类型为 number 时遇到了问题:

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 应该总是数字类型。但是根据 typescript ， 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)
输入使用字符串类型是有原因的。通过这种方式，您可以保持 typescript 提供的类型安全性。