我正在尝试将 antd 用于我的 React 应用程序，但提供的模式似乎不起作用。该按钮是可见的，但当我单击它时没有任何反应，也没有抛出任何错误。

我也用他们官方 modal documentation 上提供的其他模式尝试过这个.

模态代码:

    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;

最佳答案

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

Prop 名称 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>

我通过检查元素并更改 prop 值发现了这一点。

https://stackoverflow.com/questions/73602799/