# Switch 包含受控、非受控 2 种用法，请注意区别

- order: 0
- title_en: Contains controlled and uncontrolled, please note the difference


包含受控、非受控 2 种用法，请注意区别。

---
```js
<NukePlayGround>
  // 非受控用法
  <Switch
    key="switch3"
    defaultChecked={true}
    onValueChange={(value) => this.changeNotice('switch3', value)}
  />

  // 受控用法
  <View style={styles.cellItem}>
    <Switch
      key="switch4"
      defaultChecked={false}
      onValueChange={(value) => this.changeNotice('switch4', value)}
    />
    <View style={styles.cellResult}>
      <Text style={styles.label}>switch4 返回: </Text>
      <Text style={styles.text}>{this.state.switch4}</Text>
    </View>
  </View>
</NukePlayGround>
```
---

```js
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Page from 'nuke-page';
import Switch from 'nuke-switch';
import ThemeProvider from 'nuke-theme-provider';

const { StyleProvider } = ThemeProvider;
let md = {
  Core: {
    [`color-brand1-6`]: '#1A9CB7'
  },
  Switch: {}
};
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      switch1: true,
      switch2: false,
      switch3: null,
      switch4: null
    };
  }
  change = (item, value) => {
    let obj = {};
    obj[item] = value;
    this.setState(obj);
  };
  changeNotice = (item, value) => {
    let obj = {};
    obj[item] = value;
    this.setState(obj);
  };
  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: true }}>
        <Page title="Switch">
          <Page.Intro main="非受控，组件checked 状态更新后，返回结果" />
          <View style={styles.row}>
            <View style={styles.cellItem}>
              <Switch
                key="switch3"
                defaultChecked={true}
                onValueChange={(value) => this.changeNotice('switch3', value)}
              />
              <View style={styles.cellResult}>
                <Text style={styles.label}>switch3 返回: </Text>
                <Text style={styles.text}>{this.state.switch3}</Text>
              </View>
            </View>
            <View style={styles.cellItem}>
              <Switch
                key="switch4"
                defaultChecked={false}
                onValueChange={(value) => this.changeNotice('switch4', value)}
              />
              <View style={styles.cellResult}>
                <Text style={styles.label}>switch4 返回: </Text>
                <Text style={styles.text}>{this.state.switch4}</Text>
              </View>
            </View>
          </View>
          <Page.Intro main="disabled" />
          <View style={styles.row}>
            <View style={styles.cellItem}>
              <Switch disabled checked={true} />
            </View>
            <View style={styles.cellItem}>
              <Switch disabled />
            </View>
          </View>
          <Page.Intro main="222222" />
          <View style={styles.row}>
            <Switch
              key="switch6"
              defaultChecked={false}
              onValueChange={(value) => this.changeNotice('switch6', value)}
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  row: {
    width: 200,
    height: 100,
    backgroundColor: '#fff333',
    flexDirection: 'row'
  },
  // row: {
  //   flexDirection: 'row',
  //   paddingLeft: 40,
  //   marginBottom: 30
  // },
  cellItem: {
    flex: 1,
    height: 240
  },
  cellResult: {
    flexDirection: 'row'
  },
  text: {
    marginTop: 20,
    fontSize: 24
  },
  label: {
    marginTop: 20,
    fontSize: 24,
    color: '#999999'
  }
};
render(<App />);
```