Antd模态框不会在按钮点击时显示。

Question

我正在尝试在我的React应用程序中使用Antd，但提供的模态框似乎无法工作。按钮可见，但单击它时没有任何反应，也没有抛出任何错误。

我还尝试了他们官方模态框文档中提供的其他模态框。

模态框代码:

    import { Button, Modal } from 'antd';
    import React, { useState } from 'react';
    
    const App = () => {
      const [isModalOpen, setIsModalOpen] = useState(false);
    
      const showModal = () => {
        setIsModalOpen(true);
      };
    
      const handleOk = () => {
        setIsModalOpen(false);
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    
      return (
        <>
          <Button type="primary" onClick={showModal}>
            Open Modal
          </Button>
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </>
      );
    };
    
    export default App;

- Siddharth Joshi

Answer 1

Antd似乎更新了传递给Modal组件的属性名称。

属性名open已更改为visible。

此代码有效：

<Modal title="Basic Modal" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</Modal>

我通过检查元素并更改属性值找到了这个。

- Siddharth Joshi

---

请注意，GitHub在14天前进行了一些更改，请参见https://github.com/ant-design/ant-design/issues/36609，也许他们会将其改回来。 - Christian

"visible" 属性名称适用于 Antd 4.23 或更低版本。请确保在其网站顶部栏中将文档的版本号更改为您正在使用的版本号。 - Sergiu Elmi

谢谢。我以为是版本的问题。我正在使用4.20.6。但根据文档，即使对于这个版本，他们也在使用open prop。 - Mohammed Hafiz

Answer 2

你尝试正确导入CSS了吗？

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'antd/dist/antd.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

- Josia RAZAFINJATOVO

---

一切都是正确的，就像我说的那样，prop open已更改为visible，但文档中没有提到。感谢您的帮助！ - Siddharth Joshi

Answer 3

尝试导入CSS。

import "antd/dist/antd.css"

当我创建一个新的应用程序时，这对我有用。但是当我尝试将Modal集成到以前的React应用程序中时，我遇到了同样的问题。

我尝试将open更改为visible，但即使如此，我也不知道你是如何解决它的。我很感激。

- Geoffrey Rathinapandi

---

尝试更新Ant版本，这个属性可能不适用于旧版本。 - Siddharth Joshi