编辑弹窗需手动管理状态与dom生命周期：点击时通过data属性传值回填表单，关闭时不重置/销毁dom，提交前校验并正确序列化数据，确保name属性完备以维持数据映射。
直接用原生 HTML + JavaScript 实现“编辑弹窗”没有内置组件，必须手动控制显示/隐藏、数据回填、表单提交逻辑——这不是加个 modal 属性就能完事的，关键在状态同步和 DOM 生命周期管理。
怎么让弹窗真正“编辑”已有数据而不是新建一条
核心是点击编辑按钮时，把当前行的 ID 和字段值传进弹窗表单，而不是清空重置。常见错误是弹窗一打开就 form.reset()，结果回填失效。
- 给编辑按钮加
data-id、data-name、data-email等属性，存原始数据 - 弹窗
form的每个input用name对应字段名，方便统一回填：<input name="name"><input name="email">
- JS 里用
form.elements.name.value = button.dataset.name逐个赋值，别依赖form.dataset—— 表单元素本身没dataset - 提交前务必读取弹窗内
form的实时值，而不是再读按钮上的dataset（用户可能改过）
为什么点遮罩层或按 Esc 后数据丢了
因为关闭弹窗时没区分“取消”和“意外关闭”，直接销毁了 DOM 或清空了表单，导致正在输入的内容被丢弃。用户没点“确定”不等于不想改。
- 监听
click遮罩层时，先检查event.target === modalBackdrop，避免误判点击弹窗内部 - 按
Escape关闭前，加一个简单判断：if (!form.checkValidity()) { if (!confirm('放弃修改？')) return; } - 更稳妥的做法：关闭弹窗只隐藏（
modal.style.display = 'none'），不移除 DOM，下次打开复用同一表单节点 - 不要在关闭时调用
form.reset()，留到下一次“新建”操作再重置
submit 事件里阻止默认行为但后端没收到数据
常见于用 fetch 提交却忘了设请求头、没处理 JSON 序列化，或者把 FormData 直接当对象传给 JSON.stringify。
- 如果后端要 JSON：
const data = Object.fromEntries(new FormData(form));fetch('/api/users/' + id, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); - 如果后端接收
multipart/form-data，就直接传new FormData(form)，别套JSON.stringify -
fetch成功后记得手动关闭弹窗，否则用户以为卡住了；失败时把错误信息塞进form下方的<small class="error"></small>，别只用alert - 按钮提交后立即禁用：
submitBtn.disabled = true，防止重复提交
最易忽略的是：弹窗里的 input 缺少 name 属性，导致 FormData 拿不到值；或者用了 id 当标识却没在 JS 里正确读取。编辑弹窗不是“画个框+放表单”就完事，它本质是视图与数据模型之间的一次精确映射，差一个 name，整条链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
