# 开关

## Usage

```js
import { Switch } from 'amos-framework';

state = {
  checked: false
};

<Switch onOff={this.state.checked} onChange={this.onChange} />
<Switch defaultOn onChange={this.onChange} />
<Switch defaultOn onLabel="是" offLabel="否" onChange={this.onChange} />
<Switch defaultOn onLabel="全部启用" offLabel="全部禁用" style={{ width: 80 }} onChange={this.onChange} />
<Switch onLabel={<Icon icon="favorite1" />} offLabel={<Icon icon="favorite" />} onChange={this.onChange} />
```

## 案例演示

### Switch 基本使用

---demo
```js
import { Switch, StdForm, Icon } from 'amos-framework';

const onChange = (onOff) => {
  console.log('Switch onOff:', onOff);
}

ReactDOM.render(
  <div style={{ width: '20em', display: 'inline-block' }}>
    <StdForm label="基本使用"><Switch defaultOn onChange={onChange} /></StdForm>
    <StdForm label="带文字"><Switch defaultOn onLabel="是" offLabel="否" onChange={onChange} /></StdForm>
    <StdForm label="带长文字">
      <Switch defaultOn onLabel="全部启用" offLabel="全部禁用" style={{ width: 80 }} onChange={onChange} />
    </StdForm>
    <StdForm label="禁用"><Switch disabled onChange={onChange} /></StdForm>
    <StdForm label="小尺寸"><Switch small onChange={onChange} /></StdForm>
    <StdForm label="文字图标">
      <Switch onLabel={<Icon icon="favorite1" />} offLabel={<Icon icon="favorite" />} onChange={onChange} />
    </StdForm>
  </div>
  , _react_runner_);
```
---demoend

### Switch 外层容器事件

如果给外层容器设置事件，采用 onChange 的第二个参数 `event`，执行 `event.stopPropagation();` 阻止事件冒泡

---demo
```js
import { Switch, StdForm, Icon } from 'amos-framework';

const onChange = (onOff) => {
  console.log('Switch onOff:', onOff);
}

const onChange2 = (onOff, e) => {
  // e.preventDefault();
  e.stopPropagation();
  console.log('Switch onOff:', onOff);
}

const onClickContainer = () => {
  console.log('点击内层，事件冒泡');
}

ReactDOM.render(
  <div style={{ width: '20em', display: 'inline-block' }} onClick={onClickContainer}>
    <StdForm label="默认事件"><Switch defaultOn onLabel="是" offLabel="否" onChange={onChange} /></StdForm>
    <StdForm label="阻止事件冒泡"><Switch defaultOn onLabel="是" offLabel="否" onChange={onChange2} /></StdForm>
  </div>
  , _react_runner_);
```
---demoend

### Switch 受控

---demo
```js
import { Switch, StdForm, Icon } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
  }

  onChange = (onOff) => {
    console.log('Switch onOff:', onOff);
    this.setState({
      value: onOff
    });
  }

  render() {
    const { value } = this.state;
    return (
      <div style={{ width: '20em', display: 'inline-block' }}>
        <StdForm label="基本使用"><Switch onOff={value} onChange={this.onChange} /></StdForm>
        <StdForm label="带文字"><Switch onOff={value} onLabel="是" offLabel="否" onChange={this.onChange} /></StdForm>
        <StdForm label="带长文字">
          <Switch onOff={value} onLabel="全部启用" offLabel="全部禁用" style={{ width: 80 }} onChange={this.onChange} />
        </StdForm>
        <StdForm label="小尺寸"><Switch onOff={value} small onChange={this.onChange} /></StdForm>
        <StdForm label="文字图标">
          <Switch onOff={value} onLabel={<Icon icon="favorite1" />} offLabel={<Icon icon="favorite" />} onChange={this.onChange} />
        </StdForm>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params | 类型 | 默认值 | 说明  |
| ------ | ------ | ------ | ------ |
| className | string | - | 自定义样式名 |
| prefixCls | string | `amos-switch` | 样式前缀 |
| disabled | boolean | false | 是否禁用 |
| small | boolean | flase | 是否是小尺寸 |
| onOff | boolean | false | 是否打开或关闭 |
| defaultOn | boolean | - | 初始时否选中 |
| onChange | `function: (onOff: boolean, e: Event) => {}` | - | 变化时回调函数 |
| onClick | `function: (onOff: boolean, e: Event) => {}` | - | 点击时回调函数 |
| onLabel | `string or react node` | - | 选中时的内容 |
| offLabel | `string or react node` | - | 非选中时的内容 |

> 注意，since v1.11.0 版本，当 `defaultOn` 和 `onOff` 同时存在时，则 `defaultOn` 值不再起效。早期版本采用 `onOff=props.onOff || props.defaultOn || false` 进行赋值，存在一定的歧义。
> v1.11.0 版本起，当手动传入 `onOff` 时，此时即使手动传入了 `defaultOn`，onOff 的初始值，依然是 `props.onOff`。
> 建议：如果传入了受控 props onOff，则无需再传入 `defaultOn`