Stas Kurilin Stas Kurilin - 6 months ago 88
Javascript Question

Using React with Bootstrap Toggle

I want to use bootstrap toggle inside a React component. However a regular checkbox is shown instead of a styled element. How that could be fixed?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script type="text/jsx">
var WordCheckBox = React.createClass({
render: function() {
return (
<div className="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />
option1
</label>
</div>
);
}
});
React.render(
<WordCheckBox />,
document.getElementById('content')
);
</script>

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
</head>

<body>
<!--doesn't work. checkbox instead of toogle shown-->
<div id="content"> </div>
<!--works-->
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off">
<span>option2</span>
</label>
</div>

<!--works-->
<div class="checkbox" data-reactid=".0">
<label data-reactid=".0.0">
<input type="checkbox" data-toggle="toggle"
data-on="On" data-off="Off"
data-reactid=".0.0.0">
<span data-reactid=".0.0.1">option3</span>
</label>

</div>
</body>
</html>

Answer

Based on their docs

You need to wire up the plugin's functionality when your React component mounts (when it spits out the HTML into the DOM)

Add a componentDidMount lifecycle hook and give the input a ref attribute to accomplish this.

var WordCheckBox = React.createClass({

    componentDidMount: function() {

      $( this.refs.toggleInput.getDOMNode() ).bootstrapToggle();

    }

    ...

    render: function() {

        ...

        <input ref="toggleInput" type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />