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

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。