@aliretail/react-materials-components/demo/ToggleStatus/usage.md

B 端物料组件库

---
title: ToggleStatus-Usage
order: 2
---

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

class App extends Component {
  state = {
    simpleValue: true,
    text: '启用中',
    value: true,
    disabled: false,
  };
  onClick = () => {
    ToggleStatus.confirmPopover({
      title: '确定开启xxx',
      subTitle: '开启后，xxx',
      onOk: () => {
        alert('success');
      },
      onCancel: () => {
        console.log('cancel');
      },
      overlayProps: {
        style: { width: 400 },
      },
    });
  };

  onSimpleChange = () => {
    const { simpleValue } = this.state;
    this.setState({
      simpleValue: !simpleValue,
      text: simpleValue ? '禁用中' : '启用中',
    });
  };

  onSDKChange = () => {
    const { value } = this.state;
    this.setState({
      value: !value,
    });
  };

  toggleDisable = () => {
    const { disabled } = this.state;
    this.setState({
      disabled: !disabled,
    });
  };

  render() {
    const { simpleValue, text, value, disabled } = this.state;

    return (
      <div>
        <p>简单表格调用场景</p>
        <div>
          <Button type="primary" onClick={() => this.toggleDisable()}>
            {disabled ? '启用' : '禁用'}
          </Button>
        </div>
        <br />
        <ToggleStatus
          text={text}
          value={simpleValue}
          disabled={disabled}
          onChange={() => this.onSimpleChange()}
          checkedConfirmProps={{
            title: '确定开启吗？',
            subTitle: '修改后，买家将可以在店内消费',
          }}
          unCheckedConfirmProps={{
            title: '确定关闭吗？',
            subTitle: '修改后，买家将无法在店内消费，请谨慎操作。',
          }}
          overlayProps={{ className: 'aliretail-demo' }}
        />
        <br />
        <p>前端SDK调用场景</p>
        <ToggleStatus
          value={value}
          checkedChildren="on"
          unCheckedChildren="off"
          overlayProps={{ size: 'medium' }}
          onChange={() => this.onSDKChange()}
          checkedConfirmProps={{
            title: '确定开启吗？',
            subTitle: '修改后，买家将可以在店内消费',
          }}
          unCheckedConfirmProps={{
            title: '确定关闭吗？',
            subTitle: '修改后，买家将无法在店内消费，请谨慎操作。',
          }}
        />
        <br />
        <p>二次确认弹框</p>
        <Button type="primary" onClick={() => this.onClick()}>
          弹框
        </Button>
      </div>
    );
  }
}

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