废话不多说,直接开门见山!
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 中使用,也可以在 DOM 节点中使用它:
const myInput = document.querySelector('input.my-input')
const number = myInput.valueAsNumber
同时,这个值可以被再次赋值:
myInput.valueAsNumber = 123.456
但是,valueAsNumber
的类型是 number
类型。因此,这意味着如果没有为输入设置值,将获得的是 NaN
:
typeof NaN // 'number'
这就是 JavaScript 有趣的部分。因此,在将valueAsNumber 赋值给变量之前,一定要检查它是否为 NaN
。
const number = myInput.valueAsNumber
if (!isNaN(number)) {
// todos
}
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)
}}
/>
)
}
同样,可以在 dom 中使用:
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) {
// use the date
}
更多关于这两个属性的详细可以参看 MDN。
原文链接:https://juejin.cn/post/7241859817564110885 作者:编程轨迹