React中如何处理HTML原生Date输入框的键盘输入异常？

问题根源 #

用原生<input type="date" />时，按连续数字输入日期（比如输01012023对应2023年1月1日），输入到第5个字符01012的时候，浏览器会乱解析：把前两位01当月份，中间两位01当日期，第5位2直接当成年份开头，生成0002-01-01这种离谱的历史日期，再因为时区和老历法的问题，显示成31/12/0001，这时候只能用鼠标操作才能恢复，体验糟透了。

解决思路：拦截无效输入的中间态 #

核心就是：只在用户输入了完整且合法的8位数字日期时，才更新绑定的value；输入不完整的时候，保持之前的有效日期（或者清空），不让浏览器瞎解析。

代码实现 #

import { useState, useCallback } from 'react';

function DateInput() {
  const [dateValue, setDateValue] = useState('');

  const handleDateChange = useCallback((e) => {
    // 先把输入里的非数字都清掉
    const rawInput = e.target.value.replace(/\D/g, '');
    
    // 只有输入满8位数字才处理
    if (rawInput.length === 8) {
      // 拼成YYYY-MM-DD格式
      const year = rawInput.slice(0,4);
      const month = rawInput.slice(4,6);
      const day = rawInput.slice(6,8);
      const candidateDate = `${year}-${month}-${day}`;

      // 校验日期是不是真的合法（比如2023-02-30这种要过滤掉）
      const date = new Date(candidateDate);
      if (date.getFullYear() === +year && 
          date.getMonth() + 1 === +month && 
          date.getDate() === +day) {
        setDateValue(candidateDate);
      }
    } else if (rawInput.length === 0) {
      // 清空输入时同步更新状态
      setDateValue('');
    }
    // 输入不完整的时候，不更新状态，保持原来的有效值
  }, []);

  return (
    <input
      type="date"
      value={dateValue}
      onChange={handleDateChange}
    />
  );
}

适配多场景更新 #

要是需要从外部更新这个日期（比如表单重置、后端数据回显），直接修改dateValue的状态就行，完全兼容你的其他业务逻辑，不用搞refs或者换成defaultValue。

内容的提问来源于stack exchange，提问作者Charlie