时间戳

首页 > 解决方案 > HTMLInputElement event.target.value 输出字符串事件，尽管它是范围元素（打字稿）

html - HTMLInputElement event.target.value 输出字符串事件，尽管它是范围元素（打字稿）

问题描述

问题：

const exampleNumberType: number = 0;
<input type="range" onChange={
   (event: React.ChangeEvent<HTMLInputElement>) => exampleNumberType = event.target.value
}/>

在打字稿中，上面的代码会抛出一个错误，因为event.target.value的类型是'string'，但是由于它是从范围事件输入的，所以它应该是数字类型（因为范围元素用于选择数字，不是字符串）。

显然，您可以使用parseInt()或类似的东西来转换值并使其符合您需要的类型，但是有一个更优雅的解决方案（见下面的答案）......

标签： htmlreactjstypescript

解决方案

您可以event.target.value使用标准的 javascript 方法将字符串转换为数字，但我想我找到了一个更优雅的解决方案：

我的答案：

多亏了这个文档，我发现'event.target'对象的一些方法会将值作为数字返回，或者，如果你想要的话，作为日期......

event.target.valueAsNumber

event.target.valueAsDate

因此，没有类型错误的新代码将如下所示：

const exampleNumberType: number = 0;
<input type="range" onChange={
   (event: React.ChangeEvent<HTMLInputElement>) => exampleNumberType = event.target.valueAsNumber
}/>

推荐阅读