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=".3.4/css/bootstrap.min.css" rel="stylesheet">
<script src=".13.1.js"></script>
<script src=".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=".2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src=".1.1.min.js"></script>
<script src=".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>
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>
- 1 Try using React Bootstrap: react-bootstrap.github.io – David Hellsing Commented Apr 14, 2015 at 20:40
- @David i can not toogle element there. – Stan Kurilin Commented Apr 14, 2015 at 20:51
- 2 From looking at the demo, it looks like the code manipulates the DOM, which means it's not easily compatible with ReactJS as currently written. – WiredPrairie Commented Apr 14, 2015 at 20:58
- @WiredPrairie that's sad. Can I specify order in with they will manipulate DOM or do some other smart thing? – Stan Kurilin Commented Apr 14, 2015 at 21:04
- No. If you look at @David's suggestion, you'll see that it generates HTML that exactly matches what Bootstrap would have done for a given component. It's not manipulated/morphed at run-time. – WiredPrairie Commented Apr 14, 2015 at 21:08
3 Answers
Reset to default 7Based 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">
on - Sets the toggle to 'On' state
off - Sets the toggle to 'Off' state
componentDidMount: function() {
$( this.refs.toggleInput.getDOMNode() ).bootstrapToggle('on');
}