时间戳

首页 > 解决方案 > 如何处理打字稿中的数字输入？

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

问题描述

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

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);
}

这很好用，但我是否遗漏了一些东西来保证这种类型的安全？

标签： reactjstypescript

解决方案

通常，您需要将变量设为字符串，以便一切正常工作。

然后，当您想将其用作数字时，请在该点进行转换。您可以使用类似+value或parseFloat(value)

输入使用字符串类型是有原因的。这样你就可以保持打字稿提供的类型安全。

推荐阅读