Switch开关

开关选择器。

何时使用

• 需要表示开关状态/两种状态之间的切换时；

• 和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

代码演示

基本

最简单的用法。

import { Switch } from 'choerodon-ui/pro';
function onChange(checked) {
  console.log(`switch to ${checked}`);
}
ReactDOM.render(
  <Switch defaultChecked onChange={onChange} />,
  mountNode
);

绑定数据源

绑定数据源

import { DataSet, Switch } from 'choerodon-ui/pro';
function handleChange({ name, value, oldValue }) {
  console.log(`[dataset:${name}]`, value, '[oldValue]', oldValue);
}
const data = [{
  bind: 'A',
}];
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'bind', multiple: true },
      { name: 'bind2', type: 'boolean' },
      { name: 'bind3', type: 'boolean', trueValue: 'Y', falseValue: 'N' },
    ],
    data,
    events: {
      update: handleChange,
    },
  });
  render() {
    return (
      <div>
        <Switch dataSet={this.ds} name="bind" value="A" />
        <Switch dataSet={this.ds} name="bind" value="B" />
        <Switch dataSet={this.ds} name="bind" value="C" />
        <Switch dataSet={this.ds} name="bind2" />
        <Switch dataSet={this.ds} name="bind3" />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

只读

只读。

import { Switch, DataSet } from 'choerodon-ui/pro';
const data = [{ rd: 'C' }];
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'rd', readOnly: true },
    ],
    data,
  });
  render() {
    return (
      <div>
        <Switch name="rd" disabled />
        <br />
        <Switch name="rd" readOnly />
        <br />
        <Switch dataSet={this.ds} name="rd" value="C" />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

受控

受控。

import { Switch } from 'choerodon-ui/pro';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: ['A'],
    };
  }
  handleChange = (value, oldValue) => {
    console.log('[controlled]', value, '[oldValues]', oldValue);
    const { values } = this.state;
    if (value) {
      values.push(value);
    } else {
      values.splice(values.indexOf(value), 1);
    }
    this.setState({
      values,
    });
  }
  render() {
    const { values } = this.state;
    return (
      <div>
        <Switch
          name="controlled"
          value="A"
          checked={values.indexOf('A') !== -1}
          onChange={this.handleChange}
        />
        <br />
        <Switch
          name="controlled"
          value="B"
          checked={values.indexOf('B') !== -1}
          onChange={this.handleChange}
        />
        <br />
        <Switch
          name="controlled"
          value="C"
          checked={values.indexOf('C') !== -1}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

文字

带有文字和图标。

import { Switch, Icon } from 'choerodon-ui/pro';
ReactDOM.render(
  <div>
    <Switch unCheckedChildren="关" defaultChecked>开</Switch>
    <br />
    <Switch unCheckedChildren="0">1</Switch>
    <br />
    <Switch unCheckedChildren={<Icon type="close" />}><Icon type="check" /></Switch>
  </div>,
  mountNode);

两种大小

size="large" 表示大号开关。size="small" 表示小号开关。

import { Switch } from 'choerodon-ui/pro';
ReactDOM.render(
  <div>
    <Switch size="large" defaultChecked />
    <br />
    <Switch defaultChecked />
    <br />
    <Switch size="small" defaultChecked />
  </div>,
  mountNode);

API

更多属性请参考 CheckBox。