Switch 开关
开关选择器。
何时使用#
- 需要表示开关状态/两种状态之间的切换时;
- 和
checkbox
的区别是,切换switch
会直接触发状态改变,而checkbox
一般用于状态标记,需要和提交操作配合。
开关选择器。
checkbox
的区别是,切换 switch
会直接触发状态改变,而 checkbox
一般用于状态标记,需要和提交操作配合。import { Switch } from 'antd';
function onChange(checked){
console.log('switch to ' + checked);
}
ReactDOM.render(<Switch defaultChecked={false} onChange={onChange} />,
mountNode);
import { Switch, Icon } from 'antd';
ReactDOM.render(<div>
<Switch checkedChildren="开" unCheckedChildren="关" />
<span> </span>
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
</div>, mountNode);
import { Switch, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
disabled: true
};
},
toggle(){
this.setState({
disabled: !this.state.disabled
});
},
render() {
return <div>
<Switch disabled={this.state.disabled} />
<br />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>;
}
});
ReactDOM.render(<Test />, mountNode);
import { Switch } from 'antd';
ReactDOM.render(
<div>
<Switch />
<Switch size="small" />
</div>
, mountNode);