switch field - Maixbxp/salt-ui GitHub Wiki

switch-field

switch-field 是一个切换开关的field.

Simple Usage

<div id="Demo"></div>
class Demo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            on: true,
            on1: false,
            on2: true,
            on3: false
        }
    }

    handleChange(key,value) {
        this.setState({
            [key]: value
        })
    }

    render() {
        return (
            <div>
                <Group.List title="开关控件">
                    <SwitchField label="默认选中" on={this.state.on} onChange={this.handleChange.bind(this,'on')}/>
                    <SwitchField label="默认没选中" on={this.state.on1} onChange={this.handleChange.bind(this,'on1')}/>
                    <SwitchField label="不可选" on={this.state.on2} readOnly={true} onChange={this.handleChange.bind(this,'on2')}/>
                    <SwitchField label="不可选" on={this.state.on3} readOnly={true} onChange={this.handleChange.bind(this,'on3')}/>
                </Group.List>
            </div>
        );
    }
}

Props

className

描述:自定义样式class名称。

类型:String

默认:''

必选:否

示例:

<SwitchField className="customClass" />

label

描述:field 中自定义的内容简述

类型:String

默认:''

必须:否

on

描述:当前开关的状态

类型:Boolean

默认:true

必选:是

onChange

描述:当前开关的change事件处理函数

类型:Function

必选:是

参数: on 当前返回的开关状态

参数:e The SyntheticEvent object

示例:

    handleChange(form, on) {
        this.setState({
            [form]: on
        });
    }
    render (){
        return <SwitchField label="不可选" on={this.state.on3} readOnly={true} onChange={this.handleChange.bind(this,'on3')}/>
    }
⚠️ **GitHub.com Fallback** ⚠️