Switch 开关

开关选择器。

何时使用

• 需要表示开关状态/两种状态之间的切换时；
• 和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

代码演示

基本

最简单的用法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch } from 'choerodon-ui/pro';
​
function onChange(checked) {
  console.log(`switch to ${checked}`);
}
​
ReactDOM.render(
  <Switch defaultChecked onChange={onChange} />,
  document.getElementById('container')
);
​

受控

受控。

​
import React from 'react';
import ReactDOM from 'react-dom';
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"

绑定数据源

绑定数据源

​
import React from 'react';
import ReactDOM from 'react-dom';
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 style={{margin:'.1rem'}}  dataSet={this.ds} name="bind" value="A" />

文字

带有文字和图标。

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Icon } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <div>
    <Switch style={{margin:'.1rem'}}  unCheckedChildren="关" defaultChecked>开</Switch>
    <br />
    <Switch style={{margin:'.1rem'}}  unCheckedChildren="0">1</Switch>
    <br />
    <Switch style={{margin:'.1rem'}}  unCheckedChildren={<Icon type="close" />}><Icon type="check" /></Switch>
  </div>,
  document.getElementById('container'));
​

只读

只读。

​
import React from 'react';
import ReactDOM from 'react-dom';
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 style={{margin:'.1rem'}}  name="rd" disabled />
        <br />
        <Switch style={{margin:'.1rem'}}  name="rd" readOnly />
        <br />
        <Switch style={{margin:'.1rem'}}  dataSet={this.ds} name="rd" value="C" />
      </div>
    );
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

API

更多属性请参考 CheckBox。