Naive UI 的 Modal 关闭后怎么清空表单数据？

诸葛雨帆提问于 2026-03-09 08:16:23 阅读 14

组件

我在用 Naive UI 的 Modal 做一个用户信息编辑弹窗，打开时会把用户数据传进去填充表单。但关闭 Modal 后再打开另一个用户，表单里还是上次的数据，明显没清掉。我试过在 onClose 里手动重置状态，但好像时机不对，或者根本没触发？

下面是我简化后的代码：

const [showModal, setShowModal] = useState(false);
const [formData, setFormData] = useState({ name: '' });

const openModal = (user) => {
  setFormData(user);
  setShowModal(true);
};

// 想在关闭时清空，但无效？
const handleClose = () => {
  setShowModal(false);
  setFormData({ name: '' });
};

是不是应该用 onAfterLeave 之类的钩子？或者有别的推荐做法？

Modal模态框 Naive UI

我来解答赞 5 收藏

反馈

1 条解答

技术蕴轩 Lv1

问题应该出在关闭动画导致的状态更新时机不对。Naive UI的Modal组件关闭时有动画过渡，直接监听onClose会在动画开始时就触发，这时候DOM还没完全销毁，可能导致状态更新被覆盖。

两种靠谱的解决方案：

第一种是用onAfterLeave，这是动画完全结束的回调：

const handleClose = () => setShowModal(false);

const handleAfterLeave = () => setFormData({ name: '' });



// Modal组件上加这个prop

n-modal after-leave={handleAfterLeave}

第二种更简单，在openModal里重置表单，确保每次打开都是干净状态：

const openModal = (user) => {

  setFormData({ name: '' }); // 先重置

  setFormData(user);         // 再赋值

  setShowModal(true);

};

我平时喜欢用第二种，因为就算用户快速连续打开不同弹窗也不会出问题。第一种方案在极端情况下如果用户手速太快，可能在动画没结束时就又打开了新弹窗。

2026-03-09 08:19