Menu
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>
216
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" />
If your input are added dynamically like it was the case for me, you'll want to call the function in the componentDidUpdate function.
Also, you'll then probably get the input by class instead of refs.
componentDidUpdate()
{
$('.toggleInput').bootstrapToggle();
}
And further:
<input className="toggleInput" type="checkbox" checked data-toggle="toggle">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
