Switch

• category: Components
• chinese: 开关
• type: Basic

Usage

Switch is a switch button component with status switching.

API

| Attribute | Description | Type | Default | | -------------- | ------------------------------------------------------------------------ | --------------- | ------- | | disabled | Is the switch interactive? | boolean | true | | checked | Turn on or off（Controlled usage, Need to cooperate with onValueChange） | boolean | false | | defaultChecked | Default selection（uncontrolled usage） | boolean | false | | onValueChange | call this function when Switch changes | function(value) | null |

Usage in controlled or uncontrolled

All input and interaction class components have controlled usage and uncontrolled usage.

• Controlled usage: component status is affected by external incoming props. The external props changes, so that the components will change, such as:

constructor() {
    super();
    this.state = {
        checked: true
    }
}
change = (value) => {
    this.setState({
        checked:!value
    });
}
//...
render(){
    return (<Switch checked={this.state.checked} onValueChange={this.change}/>)
}

• Uncontrolled usage: The component itself changes freely and changes what is externally changed through the event, such as:

change = (value) => {
    console.log('switch change to: ',value);
}
//...
render(){
    return (<Switch defaultChecked={true} onValueChange={this.change}/>)
}

The Other

• Chat with @翊晨[yichen] in Dingtalk desktop App Download
• DingTalk Group