如何处理typescript中的数字输入？
如何处理typescript中的数字输入？
提问于 2020-04-07 08:06:14
这是在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}
/>
);在这种情况下，value是number类型，input是number类型(所以假设e.target.value应该总是number类型。然而，根据typescript，event.target.value始终是一个字符串。我可以把它转换成数字ie。
const onChange = (e: ChangeEvent<HTMLInputElement>) {
setValue(Number(e.target.value));
}但现在，如果输入了某个数字，用户将其退格为空，则该值将更改为0-该字段永远不能为空。
将值保留为字符串，然后在保存时将其转换为数字，这不是一个可行的解决方案
我暂时要做的事情就是让e.target.value像any一样：
const onChange = (e: ChangeEvent<HTMLInputElement>) {
setValue(e.target.value as any);
}它工作得很好，但是我是否遗漏了一些东西来保证这个类型的安全？
回答 1
Stack Overflow用户
发布于 2020-04-07 08:13:26
通常，你会想让你的变量成为一个字符串，这样所有的东西都能正常工作。
然后，当您想要将其用作数字时，在该点对其进行转换。您可以使用诸如+value或parseFloat(value)之类的命令轻松地将其转换为数字
输入使用字符串类型是有原因的。这样你就可以保持typescript提供的类型安全性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61070803
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号