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

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)

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);
      }}
    />
  )
}

const myInput = document.querySelector('input.my-input')
const number = myInput.valueAsNumber

myInput.valueAsNumber = 123.456

typeof NaN // 'number'

const number = myInput.valueAsNumber
if (!isNaN(number)) {
 // todos
}

export function DateInput() {
  const [date, setDate] = useState(null)

  return (
    <input
      type="date"
      value={date}
      onChange={(e) => {
        // ✅
        const date = e.target.valueAsDate
        setDate(date)
      }}
    />
  )
}

const myDateInput = document.querySelector('input.my-date-input')
const date = myDateInput.valueAsDate

myDateInput.valueAsDate = new Date(0)

const date = myDateInput.valueAsDate
if (date) {
 // use the date
}