# MSwitch 开关

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/switch/freepass)
- 平台：移动端
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/H5/E10zjys/#s9
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MSwitch]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { MSwitch, MSwitchChangeEventHandler, MSwitchClickEventHandler, constantsM } from '@weapp/ui';

class MSwitchDemo extends React.Component {

  state = {
    checked: false
  }

  handleClick: MSwitchClickEventHandler = (checked, e) => {
    this.setState({ checked: !this.state.checked })
  }

  onAfterClick = () => {
    console.error('onAfterClick')
  }

  handleChange: MSwitchChangeEventHandler = (checked, e) => {
    console.error('handleChange', e, checked)
  }

  handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {
    console.error('handleFocus', e)
  }
  handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {
    console.error('handleBlur', e)
  }
  onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.error('onKeyDown', e)
  }
  onKeyPress = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.error('onKeyPress', e)
  }
  onKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.error('onKeyUp', e)
  }

  render() {
    const { checked } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_switch`}
      >
        <h3 className={'list_title'}>基础用法</h3>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} label={'开启状态（lg）'}
          />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} size='md' label={'开启状态（md）'}
          />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} size='sm' label={'开启状态（sm）'}
          />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} label={'关闭状态'} />
        </div>
        <h3 className={'list_title'}>加载状态</h3>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} loading={true}  label={'开启状态'} />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} loading={true}  label={'关闭状态'} />
        </div>

        <h3 className={'list_title'}>只读状态</h3>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} readOnly label={'开启状态'} />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} readOnly label={'关闭状态'} />
        </div>

        <h3 className={'list_title'}>禁用状态</h3>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} disabled label={'开启状态'} />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch value={checked} onChange={this.handleClick} disabled label={'关闭状态'} />
        </div>

        <h3 className={'list_title'}>配合 form 使用</h3>
        <div style={{marginTop: '20px'}}>
          <MSwitch isHoldRight value={checked} onChange={this.handleClick} label={'开启状态'} />
        </div>
        <div style={{marginTop: '20px'}}>
          <MSwitch isHoldRight disabled value={checked} onChange={this.handleClick} label={'关闭状态'} />
        </div>
      </div>
    );
  }
}

export default MSwitchDemo;
```

### 受控

受控

```jsx
import React from 'react';
import { Switch, SwitchChangeEventHandler, SwitchClickEventHandler } from '@weapp/ui';

class SwitchDemo extends React.Component {

  state = {
    checked: false,
    isLoading: true
  }

  handleClick: SwitchClickEventHandler = (checked, e) => {
    console.log('handleClick', e, checked)
    this.setState({ checked: !this.state.checked, isLoading: !this.state.isLoading })
  }

  onAfterClick = () => {
    console.log('onAfterClick')
  }

  handleChange: SwitchChangeEventHandler = (checked, e) => {
    console.log('handleChange', e, checked)
  }

  handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {
    console.log('handleFocus', e)
  }
  handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {
    console.log('handleBlur', e)
  }
  onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.log('onKeyDown', e)
  }
  onKeyPress = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.log('onKeyPress', e)
  }
  onKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    console.log('onKeyUp', e)
  }

  render() {
    const { checked } = this.state;
    return (
      <div>
        <div>
          <div><Switch defaultValue={true} size='lg' /> defaultValue</div>
          <div style={{height: '20px'}}></div>
          <div><Switch value={checked} size='lg' /> checked</div>
        </div>
      </div>
    );
  }
}

export default SwitchDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| value | 是否选中（受控） | boolean | 否 |  |  |
| defaultValue | 默认是否选中 | boolean | 否 |  |  |
| checkedChildren | 选中时的内容 | React.ReactNode | 否 |  |  |
| unCheckedChildren | 非选中时的内容 | React.ReactNode | 否 |  |  |
| loading | 加载中的开关 | boolean | 否 |  |  |
| loadingIcon | switch 加载中图标 | React.ReactNode | 否 |  |  |
| size | switch 大小 | 'sm' \| 'md' \| 'lg' | 否 |  |  |
| isHoldRight | switch 是否靠右显示 |  | 否 |  |  |
| onChange | 变化回调 | (checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void | 否 |  |
| onBeforeChange | 变化前回调 | (checked: boolean, e: React.MouseEvent | React.KeyboardEvent) => Promise | 否 |  |
| onClick | 点击事件回调 | SwitchClickEventHandler | 否 |  |  |
