点击antd组件的button按钮弹出一个对话框

以下是使用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组件内部添加子元素来定义。在这个示例中，我们添加了一个简单的段落。