React中date类型输入框退格清空问题的解决方法咨询

你的问题核心是状态类型不统一：初始状态里date是Date对象，但handleDateChange将其替换为字符串，输入框的value又基于Date对象格式化，这种类型不一致导致编辑（如退格）时状态同步异常，最终触发输入框清空。以下是具体修复方案：

1. 统一状态的日期格式 #

将状态中的date改为**yyyy-MM-dd格式的字符串**（与type="date"输入框的原生值格式一致），初始值直接用当前日期的格式化结果：

// 初始状态示例
{
  ...,
  date: DateTime.now().toFormat("yyyy-MM-dd")
}

2. 修正状态变更处理函数 #

直接将输入框的字符串值存入状态，无需额外类型转换：

const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = event.target;
  setState({ ...state, [name]: value });
}

3. 简化输入框的value绑定 #

状态已匹配输入框的格式要求，直接绑定即可，无需再从Date对象转换：

<input
  type="date"
  name="date"
  value={newOverride.date}
  onChange={handleDateChange}                                   
/>

额外提示 #

如果业务逻辑中需要Date对象，在需要的时机（比如表单提交时）再做转换：

// 提交表单时将字符串转为Date对象
const handleSubmit = () => {
  const dateObj = DateTime.fromFormat(newOverride.date, "yyyy-MM-dd").toJSDate();
  // 后续使用dateObj处理业务逻辑
}

修改后，输入框的退格、编辑操作会和普通输入框一致，不会出现清空的问题。

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