Mantine 的 Modal 关闭后状态没重置怎么办？

Zz明月提问于 2026-03-26 22:43:23 阅读 27

框架

我在用 Mantine 的 Modal 组件做表单弹窗，每次关闭后再打开，输入框里还是上次填的内容。明明数据是用 useState 管理的，关掉 Modal 时也调了 reset()，但好像没生效。

试过在 onClose 里手动 setFormData({})，但下一次打开时还是旧值。是不是 Modal 没真正卸载？或者我哪里写错了？

const [opened, { open, close }] = useDisclosure(false);
const [formData, setFormData] = useState({ name: '' });

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

// Modal 内部用的是 <TextInput value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} />

Mantine UI框架

我来解答赞 4 收藏

反馈

1 条解答

端木玉军 Lv1

我的做法是直接在 Modal 关闭的时候重置表单状态，但不是只调用 reset 函数这么简单。Mantine 的 Modal 组件关闭后确实不会自动卸载，这就是问题所在。

你可以试试这样：在 useDisclosure 的 onClose 回调里直接重置表单项，而不是依赖外部的 reset 函数。像这样：

const [opened, { open, close }] = useDisclosure(false, {

  onClose: () => setFormData({ name: '' })

});



const handleInputChange = (e) => {

  setFormData(prevData => ({ ...prevData, name: e.target.value }));

};



// 然后你的 TextInput 就保持不变

// <TextInput value={formData.name} onChange={handleInputChange} />

这个方法我用过几次，亲测有效。注意这里用了函数式更新来避免潜在的状态不同步问题。说实话，表单状态管理有时候挺烦人的，但这样处理基本上能解决问题。

2026-03-26 23:00