react 中使用受控组件处理 date 类型输入时，若初始值存在但未正确同步，会导致界面不刷新；根本原因在于 date 输入框对 value 属性的格式敏感且需严格匹配 iso 8601 标准（yyyy-mm-dd），同时不能混用 defaultvalue。
react 中使用受控组件处理 date 类型输入时，若初始值存在但未正确同步，会导致界面不刷新；根本原因在于 date 输入框对 value 属性的格式敏感且需严格匹配 iso 8601 标准（yyyy-mm-dd），同时不能混用 defaultvalue。
在 React 中，<input type="date"> 是一个严格受控组件——它要求 value 属性必须始终为符合 YYYY-MM-DD 格式的字符串（如 "2023-01-01"），且该值必须与 React state 完全一致。一旦 state 更新但格式不合法、或组件意外降级为非受控（例如初始化时传了 value，后续某次渲染却传了 undefined），浏览器就会忽略更新，界面卡在初始值。
你遇到的问题本质是：value 属性被正确设置，但 onChange 事件触发后，state 更新逻辑可能未保持格式一致性，或组件在某些条件下退化为非受控状态。而答案中建议添加 defaultvalue={value} 是错误的——defaultValue 仅在组件挂载时生效，用于初始化非受控组件；与 value 同时使用不仅无效，还会导致 React 警告（A component is changing a controlled input to be uncontrolled），并破坏受控行为。
✅ 正确解法如下：
1. 确保初始值和更新值均为标准格式
React 的 input[type="date"] 只接受 YYYY-MM-DD 字符串，不支持 Date 对象、时间戳或带时分秒的 ISO 字符串（如 "2023-01-01T00:00:00"）。请统一格式化：
// ✅ 正确：格式化为纯日期字符串
const formatDate = (date: Date | string | null | undefined): string => {
if (!date) return '';
const d = new Date(date);
return d.toISOString().split('T')[0]; // → "2023-01-01"
};
// 在表单 state 初始化时
const [formData, setFormData] = useState({
birthday: formatDate('2023-01-01'), // 显式标准化
telephone: '',
mail: '',
});2. 使用受控模式 + 正确的 onChange 处理
确保每次 onChange 都将原生事件值（已是 YYYY-MM-DD）直接同步到 state：
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};3. Input 组件保持简洁，无需 defaultValue
你的 Input 组件写法本身正确，切勿添加 defaultvalue：
export const Input = ({
name,
type,
required,
onChange,
value,
disabled
}: InputProps) => {
return (
<input
name={name}
type={type}
id={name}
required={required}
onChange={onChange}
value={value ?? ''} // 防止 undefined 导致非受控
disabled={disabled}
/>
);
};⚠️ 关键注意事项：
- value 必须始终为字符串（空字符串 '' 优于 undefined）；
- 不要混用 value 和 defaultValue；
- 若从后端获取日期，务必在存入 state 前调用 formatDate()；
- 浏览器日期选择器不会触发 onBlur 或 onInput 来替代 onChange —— onChange 是唯一可靠事件。
示例：完整可运行片段
function DateForm() {
const [formData, setFormData] = useState({
birthday: '2023-01-01', // ✅ 合法初始值
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<form>
<Input
name="birthday"
type="date"
value={formData.birthday}
onChange={handleChange}
/>
<p>当前选中日期：{formData.birthday || '<未选择>'}</p>
</form>
);
}总结：解决 input[type="date"] 不更新的核心是 坚持受控模式 + 严格格式校验 + 避免 undefined/value 混用。移除任何 defaultValue 尝试，转而确保所有 value 属性值均为有效、稳定、标准化的 YYYY-MM-DD 字符串。
