type="reset" 在 Vue/React 中失效，因其仅重置 DOM 属性（value/checked/selected），不更新组件状态；v-model 或 useState 值保持不变，导致界面与真实状态脱节，如 checkbox 显示未勾选但 isDriver 仍为 true。
为什么 type="reset" 在 Vue/React 里完全没反应
它只重置 DOM 属性（value、checked、selected），不碰 JS 状态。Vue 的 v-model 或 React 的 useState 值根本不会变，导致界面显示和真实状态立刻脱节——比如 checkbox 看起来没勾，但 isDriver 还是 true。
常见错误现象：
• 点了 reset 按钮，input 框清空了，但提交时发现 state 里还是旧值
• 多个自定义组件（如封装的 Form.Check）状态全没变，表单看似“重置”实则失效
• 表单内混用原生 <input> 和受控组件，部分字段清了、部分没清，逻辑断裂
- React 中必须显式调用
setUser(initialValues)，不能依赖form.reset() - Vue 中要重置
ref或reactive对象，而不是靠reset按钮 - 如果用了第三方 UI 库（如 Ant Design、Element Plus），它们的输入组件基本都是受控的，
type="reset"对其零影响
如何让 reset 按钮真正同步 JS 状态
核心原则：把“重置”从 DOM 行为转为状态操作。按钮类型必须是 type="button"，否则可能意外触发表单提交或被框架拦截。
React 示例（关键不是清 DOM，而是恢复 state）：
立即学习“前端免费学习笔记（深入）”；
const initialValues = { name: '', email: '', isAdmin: false };
const [form, setForm] = useState(initialValues);
<button type="button" onClick={() => setForm({ ...initialValues })}>
Reset
</button>
Vue 3（setup + ref）：
const form = ref({ name: '', email: '', isAdmin: false });
const resetForm = () => {
form.value = { name: '', email: '', isAdmin: false };
};
- 别在
onClick里调用formElement.reset()，除非你紧接着手动同步所有 state - 如果初始值来自 props 或 API，记得把
initialValues提取为常量或useMemo缓存，避免每次渲染都新建对象 - 涉及嵌套对象或数组时，确保深拷贝（如用
{...initialValues}或structuredClone），否则引用未变会导致 React/Vue 不触发更新
reset 事件无法做确认弹窗，这是硬限制
reset 事件在重置**完成后**才触发，且 event.preventDefault() 对它无效。你看到的 confirm 弹窗，永远是“内容已丢，现在才问你”。
正确做法只能监听按钮 click，并自己控制流程：
<button type="button" onClick={() => {
if (window.confirm('确定清空？此操作不可撤销')) {
setForm(initialValues);
}
}}>
Reset
</button>
- 绝对不要给
<form>绑onreset或addEventListener('reset', ...)来做确认 - 若需更复杂的确认逻辑（如带取消按钮的 modal），必须在
onClick里处理，而不是等 reset 事件 - 注意：浏览器不提供原生“重置前钩子”，这是 HTML 规范决定的，无法绕过
混合表单（原生 + 受控）时怎么安全重置
真实项目里常有部分字段用原生 <input>（比如文件上传）、部分用受控组件。这时 form.reset() 会清掉原生字段，但留下受控字段的旧状态，造成不一致。
推荐分两步走：
- 先调用
formElement.reset()清 DOM - 再显式重置所有 JS 状态（包括受控组件对应的
useState/ref） - 对动态生成的字段（如表格行、标签页内表单），
form.reset()根本不生效，必须遍历并手动设el.value = ''或调对应 state setter
容易忽略的细节：
• <textarea> 的初始值来自 defaultValue，不是 value 属性
• <select> 要确保初始 <option selected> 存在，否则 reset() 可能选中第一个而非预期项
• contenteditable 区域、富文本编辑器（如 Quill、Tiptap）完全不在 reset() 范围内，必须单独清理
