告诉你一种处理数字和日期更好的方法

废话不多说,直接开门见山!

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 作者:编程轨迹

(0)
上一篇 2023年6月8日 上午11:07
下一篇 2023年6月9日 上午10:00

相关推荐

发表回复

登录后才能评论