【学完毕业】处理数字和日期输入的更好方法，很早就有了

前端修罗场

发布于 2023-10-07 19:56:20

1380

发布于 2023-10-07 19:56:20

文章被收录于专栏：Web 技术

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。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

date

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度