@aliretail/react-materials-components/demo/SuccessDialog/example.md

B 端物料组件库

---
title: SuccessDialog-Simple
order: 1
---

本 Demo 演示发布成功弹窗的用法。

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { SuccessDialog } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';

class App extends Component {
  state = {
    visible: false,
  };
  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  onBtnClick = () => {
    this.onClose();
  };
  labelClick = () => {
    this.setState({
      visible: true,
    });
  };
  render() {
    const dataSource = [
      {
        text: '继续发布',
        type: 'normal',
        onClick: () => {},
      },
      {
        text: '返回',
        onClick: this.onBtnClick,
      },
    ];
    const { visible } = this.state;
    return (
      <div>
        <Button onClick={this.labelClick}>点击标签弹窗</Button>
        <SuccessDialog
          dataSource={dataSource}
          visible={visible}
          title="发布成功"
          message="审核通过后即可在商品档案中显示，请耐心等待"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```