Switch 开关组件

开 / 关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。

基本用法

最简单的用法:disabled 可以设置是否可操作,size 属性设置尺寸。

Loading demo...

APIs

Switch

参数说明类型默认值
checkedChildren打开时的内容any-
sizeswitch的尺寸

可选值:
'medium'(正常大小)
'small'(缩小版大小)
Enum'medium'
unCheckedChildren关闭时的内容any-
onChange开关状态改变是触发此事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否为打开状态
e: {Event} DOM事件对象
Function() => {}
checked开关当前的值(针对受控组件)Boolean-
defaultChecked开关默认值 (针对非受控组件)Booleanfalse
disabled表示开关被禁用Booleanfalse
onClick鼠标点击事件

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Function-
onKeyDown键盘按键事件

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象
Function-
isPreview是否为预览态Booleanfalse
renderPreview预览态模式下渲染的内容

签名:
Function(value: number) => void
参数:
value: {number} 评分值
Function-

Demo

disabled 模式切换

通过回调函数来改变 switch 组件的属性 disable 值的变化,从而来控制是否可操作。

Loading demo...

受控switch 组件

受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关。 对于受控开关, 每一次 React 数据渲染时, 都会使用传入的值来更新开关, 开关本身是不能更新自己的状态的。

Loading demo...