mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
775d1800bb
* chore(deps-dev): bump eslint-config-prettier from 6.15.0 to 7.0.0 Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 6.15.0 to 7.0.0. - [Release notes](https://github.com/prettier/eslint-config-prettier/releases) - [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/eslint-config-prettier/compare/v6.15.0...v7.0.0) Signed-off-by: dependabot[bot] <support@github.com> * chore: fix eslint style * chore: prettier code style Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
51 lines
848 B
Markdown
51 lines
848 B
Markdown
---
|
|
order: 0
|
|
title:
|
|
zh-CN: 基本
|
|
en-US: Basic
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
第一个对话框。
|
|
|
|
## en-US
|
|
|
|
Basic modal.
|
|
|
|
```jsx
|
|
import React, { useState } from 'react';
|
|
import { Modal, Button } from 'antd';
|
|
|
|
const App = () => {
|
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
|
|
const showModal = () => {
|
|
setIsModalVisible(true);
|
|
};
|
|
|
|
const handleOk = () => {
|
|
setIsModalVisible(false);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsModalVisible(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showModal}>
|
|
Open Modal
|
|
</Button>
|
|
<Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
```
|