【学完毕业】处理数字和日期输入的更好方法，很早就有了
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.valueAsDatemyDateInput.valueAsDate = new Date(0)庆幸的是，对于 valueAsDate，当输入为空时，我们只得到null。
因此，你很容易能够检查该值是否为真：
const date = myDateInput.valueAsDate
if (date) {
// use the date
}更多关于这两个属性的详细可以参看 MDN。
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录