defaultValue 仅在组件首次挂载时生效，后续 prop 变化不会更新已渲染的表单控件值；应改用受控组件模式（value + onChange）确保输入值始终与状态同步。
react 中 `defaultvalue` 仅在组件首次挂载时生效，后续 prop 变化不会更新已渲染的表单控件值；应改用受控组件模式（`value` + `onchange`）确保输入值始终与状态同步。
在 React 表单开发中，defaultValue 常被误用于实现“动态默认值”逻辑——例如根据传入的 values prop 决定日期输入框初始显示 values.date 还是当前日期。但关键在于：defaultValue 是一个一次性设置属性（one-time initialization prop），并非响应式绑定。它仅在 DOM 元素首次创建时被读取并写入 <input> 的 value 属性，之后即使 values 发生变化、组件重新渲染，该 DOM 节点的 value 不会自动更新。
观察你提供的示例：
<input type="date" defaultvalue="{values?.date" values.date :>
当 values 初始为 undefined 时，defaultValue 被设为 '2023-11-20'；点击按钮后 values 变为 { date: '2023-11-28' }，组件确实重渲染，但 <input> 元素本身未被销毁重建，其 value 属性仍保持首次设置的 '2023-11-20'，因此视觉上毫无变化。
✅ 正确解法：使用受控组件（Controlled Component），即通过 value 属性显式绑定当前值，并配合 onChange 同步状态：
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
function Child({ values, change }) {
// 注意：此处 values 来自父组件，我们直接作为受控值使用
// 若需支持编辑后修改，还应搭配 useState 管理本地状态（见下方进阶说明）
return (
<div classname="container">
<button type="button" onclick="{change}">clickMe</button>
<input type="text" value="{values?.name" readonly onchange><input type="date" value="{values?.date" readonly>
</div>
);
}
⚠️ 重要提醒：
-
value属性使输入框完全受 React 状态控制，任何用户输入都必须通过onChange显式更新状态，否则输入将失效（只读）； - 若组件需支持「编辑」功能（即用户可修改字段），推荐结合
useState初始化本地状态，并在values变化时通过useEffect同步：
function Child({ values, change }) {
const [formData, setFormData] = useState({
name: '',
date: new Date().toISOString().split('T')[0], // today in YYYY-MM-DD
});
// 当 values prop 更新时，同步到本地状态（仅在编辑场景下需要）
useEffect(() => {
if (values) {
setFormData(prev => ({
...prev,
name: values.name ?? '',
date: values.date ?? prev.date,
}));
}
}, [values]);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<div classname="container">
<button type="button" onclick="{change}">clickMe</button>
<input type="text" name="name" value="{formData.name}" onchange="{handleChange}"><input type="date" name="date" value="{formData.date}" onchange="{handleChange}">
</div>
);
}
? 总结：
- ❌ 避免对需响应式更新的表单字段使用
defaultValue； - ✅ 优先采用
value+onChange的受控模式，保障数据流清晰、行为可预测； - ? 若需兼容“初始化 + 可编辑”双重需求，用
useEffect监听外部props并同步至本地state； - ? 特别注意
type="date"输入要求值格式为YYYY-MM-DD字符串，确保new Date().toISOString().split('T')[0]等生成逻辑正确。
