Javascript 将 React 与 Bootstrap Toggle 结合使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29636505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using React with Bootstrap Toggle
提问by Stan Kurilin
I want to use bootstrap toggleinside a Reactcomponent. However a regular checkbox is shown instead of a styled element. How that could be fixed?
我想在React组件中使用引导程序切换。但是，显示的是常规复选框而不是样式元素。怎么解决？
<!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>
采纳答案by Andy Ray
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)
当你的 React 组件挂载时（当它把 HTML 吐出到 DOM 中时），你需要连接插件的功能
Add a componentDidMountlifecycle hook and give the input a refattribute to accomplish this.
添加componentDidMount生命周期挂钩并为输入提供一个ref属性来完成此操作。
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" />
回答by Ryan Pergent
If your input are added dynamically like it was the case for me, you'll want to call the function in the componentDidUpdate function.
如果您的输入是动态添加的，就像我的情况一样，您将需要调用 componentDidUpdate 函数中的函数。
Also, you'll then probably get the input by class instead of refs.
此外，您可能会按类而不是 refs 获得输入。
componentDidUpdate()
{
$('.toggleInput').bootstrapToggle();
}
And further:
并进一步：
<input className="toggleInput" type="checkbox" checked data-toggle="toggle">
回答by Marek
on - Sets the toggle to 'On' state
off - Sets the toggle to 'Off' state
on - 将开关设置为“开”状态
off - 将开关设置为“关”状态
componentDidMount: function() {
$( this.refs.toggleInput.getDOMNode() ).bootstrapToggle('on');
}
