Switch component
npm install @uiw/react-switchSwitch 开关
===
表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。
``jsx`
import { Switch } from 'uiw';
// or
import Switch from '@uiw/react-switch';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Switch } from 'uiw';
export default function Demo() {
return (
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Switch, Row, Col, Button, Notify } from 'uiw';export default function Demo() {
return (
resetOnSubmit={false}
onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
onSubmit={({initial, current}) => {
console.log('switch::', initial, current)
const ErrObj = {};
if(Object.keys(ErrObj).length > 0) {
const err = new Error();
err.filed = ErrObj;
throw err;
}
}}
fields={{
switch: {
checked: true,
initialValue: true,
label: '请输入内容',
help: '必选选项！',
validator: value => !value ? '必填选项！' : null,
children:
},
}}
>
{({ fields, state, canSubmit }) => {
return (
|
|
{JSON.stringify(state.current, null, 2)}
|
);
}}
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Switch } from 'uiw';export default function Demo() {
return (
data-unchecked="关"
onChange={(e) => {
console.log('e', e.target.checked);
}}
style={{ marginRight: 10 }}
/>
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Switch } from 'uiw';export default function Demo() {
return (
电源
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Switch } from 'uiw';export default function Demo() {
return (
电源
);
}
`$3
通过
属性改变 Switch 组件状态。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Switch, Button } from 'uiw';class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: true
}
}
onChange(e) {
console.log('~~~:::');
this.setState({ checked: e.target.checked });
}
render() {
return (
type="primary"
onClick={() => {
this.setState({ checked: !this.state.checked });
}}
>
点击按钮改变 Switch 状态
)
}
}
export default Demo;
`Switch
| 参数 | 说明 | 类型 | 默认值 |
|------ |-------- |---------- |-------- |
| value | 根据 value 进行比较，判断是否选中 | String/Number/Boolean | - |
| name | 用于表单对应的名称 | String | - |
| checked | 指定当前是否选中 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| data-checked | 选中时的内容 | string/ReactNode | - |
| data-unchecked | 非选中时的内容 | string/ReactNode | - |
| size | 开关大小，可选值：
default small` | string | default |