Search results

Change switch state using toggle method in React Switch component

This section explains about how to toggle between the switch states using toggle method.

Source
Preview
app.tsx
index.html
app.jsx
import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render Switch with checked state.
class App extends React.Component<{}, {}> {
  public switch: SwitchComponent;
  constructor(props: any) {
    super(props);
    this.created = this.created.bind(this);
  }

  public created(): void {
    this.switch.toggle();
  }

  public render() {
    return (
      <SwitchComponent id="switch" ref={(scope) => { this.switch = scope as SwitchComponent; }} enableRtl={true} checked={true} created={this.created}/>
    );
  }
}
ReactDom.render(<App />, document.getElementById('switch'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Switch</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='switch'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch with checked state.
class App extends React.Component {
    constructor(props) {
        super(props);
        this.created = this.created.bind(this);
    }
    created() {
        this.switch.toggle();
    }
    render() {
        return (<SwitchComponent id="switch" ref={(scope) => { this.switch = scope; }} enableRtl={true} checked={true} created={this.created}/>);
    }
}
ReactDom.render(<App />, document.getElementById('switch'));

Switch triggers change event on every state stage to perform custom operations.