@aliretail/react-materials-components/demo/DeliverGoodsDialog/multipleTrigger.md

B 端物料组件库

---
title: 多个按钮触发只渲染一个dialog
order: 3
---

多个按钮触发只渲染一个dialog。

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

const LIST = [
  {
    code: 1,
    name: '顺丰',
    id: 1
  },
  {
    code: '2',
    name: '菜鸟',
    id: '2'
  },
  {
    code: '3',
    name: '圆通',
  }
]

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dialogVisible: false
    };
    this.showDialog = this.showDialog.bind(this)
  }
  showDialog() {
    const { dialogVisible } = this.state
    this.setState({
      dialogVisible: !dialogVisible
    })
  }
  render() {
    const { dialogVisible } = this.state
    return (
      <>
          <DeliverGoodsDialog
            appCode="retailforce_oms"
            apiCode="reverse_send_goods"
            handleOk={() => alert('success')}
            handleClose={() => alert('close')}
            logisticsAppCode="retailforce_oms"
            logisticsApiCode="reverse_query_logistics_company"
            visible={dialogVisible}
          />
          <Button onClick={this.showDialog}>发货1</Button>
          <Button onClick={this.showDialog}>发货2</Button>
        </>
    );
  }
}

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