valueAsNumber
你可能之前写过这样的代码：
export function NumberInput() {
const [number, setNumber] = useState(0)
return (
<input
type="number"
value={number}
onChange={(e) => {
const num = parseFloat(e.target.value)
setNumber(num)
}}
/>
)
}
这样写没有问题，但其实有一种更好的方式来读取数字值。
我指的是这部分代码：
// 🚩 不必要的解析！
const num = parseFloat(e.target.value)
没错，自从 IE10 时代开始，我们就有了更好的方式来获取和设置数字值：
// 🤯
const num = e.target.valueAsNumber
因此，更好的解决方案可以是：
export function NumberInput() {
const [number, setNumber] = useState(0)
return (
<input
type="number"
value={number}
onChange={(e) => {
// ✅
const num = e.target.valueAsNumber
setNumber(num)
}}
/>
)
}
当然，你不需要用 React 来实现这一点。这只是标准的 JavaScript，适用于任何框架。
你同样可以查询一个 DOM 节点并使用它：
const myInput = document.querySelector('input.my-input')
const number = myInput.valueAsNumber
而且，重要的是，你也可以对其进行写操作！
myInput.valueAsNumber = 123.456
一个小陷阱
valueAsNumber 的类型总是一个数字。因此，如果输入当前没有设置任何值，你将会得到 NaN 作为值。
别忘了…
typeof NaN // 'number'
是的，这是 JavaScript 中有趣的部分之一。因此，在将 valueAsNumber 写入期望实际数字的地方之前，确保检查它是否为 NaN。
const number = myInput.valueAsNumber
if (!isNaN(number)) {
// 我们实际上有一个“数字”数字
}
valueAsDate
但等等，还有更多！
对于日期输入，我们还有一个很方便的 valueAsDate 属性：
export function DateInput() {
const [date, setDate] = useState(null)
return (
<input
type="date"
value={date}
onChange={(e) => {
// ✅
const date = e.target.valueAsDate
setDate(date)
}}
/>
)
}
很漂亮。
对于那些不使用 React（或者性能更好的 Qwik，它看起来像 React），你当然也可以用纯 HTML 和 JavaScript 来实现：
const myDateInput = document.querySelector('input.my-date-input')
const date = myDateInput.valueAsDate
正如预期的那样，你也可以对其进行写操作：
myDateInput.valueAsDate = new Date(0)
没有陷阱
幸运的是，对于 valueAsDate，当输入为空时，我们得到的只是 null。
所以你只需检查值是否为真值：
const date = myDateInput.valueAsDate
if (date) {
// 我们得到了一个日期！
}
浏览器支持
这并不是什么新的API。即使这是你第一次了解到这些属性，它们已经存在很多年了，甚至可以追溯到 IE10 时代。
结论
现在我们知道如何使用 valueAsNumber 和 valueAsDate 属性来将数字和日期输入分别处理为真正的数字和日期值。
网友评论