使用MOBX状态时，ANTD模态不打开 /关闭

发布于 2025-02-05 05:10:43 字数 765 浏览 2 评论 0原文

我有一个简单的MOBX商店，该存储具有Bool VAR ContactFormopen和函数以设置SetContactformopen。在单击模式外或取消时，它可以正常工作，我可以看到它会改变，但模态不会打开或关闭。

const handleCancel = (e: any) => {
e.stopPropagation();
store.setContactFormOpen(false);
};

return (
    <Modal title="Contact us" visible={store.contactFormOpen} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}>
        <h1>Contact form</h1>
    </Modal>
)

在控制台日志中，我可以看到store.contactformopen正在从真实变为false，但模式未关闭或打开。有什么想法吗？谢谢！

商店：

export default class store {
contactFormOpen = false;

constructor() {
    makeAutoObservable(this)
}

setContactFormOpen = (isOpen: boolean) => {
    this.contactFormOpen = isOpen;
}
 }

原文

I have a simple MobX store that has a bool var contactFormOpen and function to set setContactFormOpen. It is working when clicking outside the modal or on cancel I can see that it changes but the modal doesn't open or close.

const handleCancel = (e: any) => {
e.stopPropagation();
store.setContactFormOpen(false);
};

return (
    <Modal title="Contact us" visible={store.contactFormOpen} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}>
        <h1>Contact form</h1>
    </Modal>
)

In the console log I can see that store.contactFormOpen is changing from true to false, but the modal is not closing or opening. Any ideas? Thanks!

The store :

export default class store {
contactFormOpen = false;

constructor() {
    makeAutoObservable(this)
}

setContactFormOpen = (isOpen: boolean) => {
    this.contactFormOpen = isOpen;
}
 }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖伴 2025-02-12 05:10:44

从描述中很难理解您的应用程序的样子，但是很明显，您至少错过了一个重要的事情：要了解组件的更改，必须将其包裹在观察者中。

我大约重现了您的应用程序，这是一个链接，您可以在其中看到应该如何实现它：

codesandbox链接＆gt;

回复收藏 0 原文

狂之美人 2025-02-12 05:10:44

嗯，听起来很奇怪。您可以添加此代码并告诉我它是否有效？

  const [openContactForm,setOpenContactForm] = useState(false)

  useEffect(()=>{
    if(openContactForm !== store.contactFormOpen) {
      setOpenContactForm(store.contactForm)
    }
  },[store.contactFormOpen])

并将您的JSX更改为此：

<Modal title="Contact us" visible={openContactForm} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}>
  <h1>Contact form</h1>
</Modal>

Mmmh sounds strange. Can you add this code and tell me if it works ?

  const [openContactForm,setOpenContactForm] = useState(false)

  useEffect(()=>{
    if(openContactForm !== store.contactFormOpen) {
      setOpenContactForm(store.contactForm)
    }
  },[store.contactFormOpen])

And change your JSX to this:

<Modal title="Contact us" visible={openContactForm} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}>
  <h1>Contact form</h1>
</Modal>

回复收藏 0 原文

~没有更多了~