Ant Design Modal 组件：点击按钮弹出对话框示例

以下是使用 Ant Design 的 Modal 组件实现点击 Button 弹出对话框的示例代码：

import { Button, Modal } from 'antd';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button type='primary' onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title='Basic Modal'
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
      </Modal>
    </div>
  );
}

 export default App;

在这个示例中，我们定义了一个名为 visible 的状态来控制 Modal 的可见性。当用户单击 Button 时，我们调用 showModal 函数来设置 visible 为 true，从而显示 Modal。Modal 具有 title、visible、onOk 和 onCancel 等属性。当用户单击 Modal 中的'确定'按钮时，我们调用 handleOk 函数来关闭 Modal，反之，当用户单击'取消'按钮或模态框外的区域时，我们调用 handleCancel 函数来关闭 Modal。Modal 中的内容可以通过在 Modal 组件内部添加子元素来定义。在这个示例中，我们添加了一个简单的段落。