React中HTML input[type=date]在Firefox编辑时值重置问题求助

问题原因 #

Firefox对React受控<input type="date" />的事件处理逻辑，与Chrome、原生非受控场景存在核心差异：

• 当用户在月/日输入段输入单个0时，Firefox会立即判定当前值为无效日期，将event.target.value设为空字符串；
• React受控组件会同步将状态更新为空，导致输入框的年/月/日字段全部清空；
• 而Chrome会保留之前的有效日期值直到用户完成输入，原生非受控场景下浏览器会自行保留用户的临时输入内容，不会强制清空。

解决方案 #

需同时满足受控组件支持外部更新和允许无效日期状态更新的需求，可选择以下方案：

方案1：基于输入状态的差异化处理 #

在onChange事件中结合历史状态，区分临时编辑与无效输入场景：

1. 维护组件状态dateValue，同时记录上一次的有效日期lastValidDate；
2. 当event.target.value不为空时，正常更新状态并同步给外部；
3. 当event.target.value为空时，通过延迟判断区分临时编辑（如刚输入单个0）和确认无效输入：
   • 临时编辑场景：恢复上次有效日期，避免清空输入框；
   • 确认无效输入（如失去焦点后仍为空）：更新状态为空，保留无效状态记录。

示例代码：

import { useState, useRef, useEffect } from 'react';

const DatePicker = ({ value: externalValue, onChange: externalOnChange }) => {
  const [dateValue, setDateValue] = useState(externalValue || '');
  const lastValidDateRef = useRef(externalValue || '');
  const inputRef = useRef<HTMLInputElement>(null);
  const inputTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 同步外部传入的更新值
  useEffect(() => {
    if (externalValue !== dateValue) {
      setDateValue(externalValue);
      lastValidDateRef.current = externalValue || '';
    }
  }, [externalValue]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    if (newValue) {
      setDateValue(newValue);
      lastValidDateRef.current = newValue;
      externalOnChange(newValue);
      return;
    }

    // 处理空值场景，延迟判断是否为临时编辑
    if (inputTimeoutRef.current) clearTimeout(inputTimeoutRef.current);
    inputTimeoutRef.current = setTimeout(() => {
      if (!inputRef.current?.value && document.activeElement !== inputRef.current) {
        // 确认输入无效，更新为空
        setDateValue('');
        externalOnChange('');
      } else {
        // 临时编辑，恢复上次有效日期
        setDateValue(lastValidDateRef.current);
      }
    }, 500);
  };

  const handleBlur = () => {
    if (!inputRef.current?.value) {
      setDateValue('');
      externalOnChange('');
    }
  };

  return (
    <input
      ref={inputRef}
      type="date"
      value={dateValue}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
};

export default DatePicker;

方案2：自定义拆分日期输入字段 #

完全规避浏览器对原生日期输入框的特殊处理，将日期拆分为年、月、日三个独立输入框：

• 每个字段单独处理输入逻辑，自行控制输入格式与范围；
• 组合三个字段的值为完整日期字符串，同步到状态并支持外部更新；
• 自行实现日期有效性校验逻辑。

该方案彻底消除浏览器差异，且可定制性更强。

方案3：使用第三方日期选择库 #

选择成熟的第三方日期选择库（如react-datepicker、MUI DatePicker等），这类库已内置跨浏览器兼容性处理，同时支持受控模式、无效日期记录等需求，无需自行处理底层差异。

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