开 / 关切换器切换单个设置选项的状态。开关控制器中的选项,以及它所在的状态,应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。
最简单的用法:disabled 可以设置是否可操作,size 属性设置尺寸。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checkedChildren | 打开时的内容 | any | - |
size | switch的尺寸 可选值: 'medium'(正常大小) 'small'(缩小版大小) | Enum | 'medium' |
unCheckedChildren | 关闭时的内容 | any | - |
onChange | 开关状态改变是触发此事件 签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否为打开状态 e: {Event} DOM事件对象 | Function | () => {} |
checked | 开关当前的值(针对受控组件) | Boolean | - |
defaultChecked | 开关默认值 (针对非受控组件) | Boolean | false |
disabled | 表示开关被禁用 | Boolean | false |
onClick | 鼠标点击事件 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | - |
onKeyDown | 键盘按键事件 签名: Function(e: Event) => void 参数: e: {Event} DOM事件对象 | Function | - |
isPreview | 是否为预览态 | Boolean | false |
renderPreview | 预览态模式下渲染的内容 签名: Function(value: number) => void 参数: value: {number} 评分值 | Function | - |
通过回调函数来改变 switch 组件的属性 disable 值的变化,从而来控制是否可操作。
受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关。 对于受控开关, 每一次 React 数据渲染时, 都会使用传入的值来更新开关, 开关本身是不能更新自己的状态的。