ant.design Modal
时间: 2023-07-26 18:04:52 浏览: 46
Ant Design是一个流行的React UI组件库,它提供了许多UI组件,包括模态框(Modal)。Ant Design的Modal组件提供了一个灵活的API,用于控制模态框的行为和外观。
以下是一个简单的使用Ant Design Modal组件的例子:
```
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
function App() {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
打开模态框
</Button>
<Modal
title="这是一个模态框"
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
>
<p>一些模态框内容...</p>
</Modal>
</>
);
}
export default App;
```
在这个例子中,我们首先使用`useState` Hook来管理模态框的可见性状态,初始值为`false`。然后我们定义了`showModal`函数来打开模态框,`handleOk`函数来处理用户点击模态框上的“确定”按钮时的事件,`handleCancel`函数来处理用户点击模态框上的“取消”按钮时的事件。
最后,我们在`return`语句中呈现了一个`Button`组件,用于触发`showModal`函数来打开模态框。我们使用`Modal`组件来呈现模态框,指定了模态框的标题、可见性状态、用户点击“确定”和“取消”按钮时的处理函数,以及模态框的内容。