Question

我想在bootstrap toggle组件中使用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>

Answer 1

基于their docs

当你的React组件安装时（当它将HTML吐出到DOM中时）你需要连接插件的功能

添加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" />

Answer 2

如果您的输入是动态添加的，就像我的情况一样，您将要在componentDidUpdate函数中调用该函数。

此外，您可能会按类而不是参考来获取输入。

componentDidUpdate()
{
    $('.toggleInput').bootstrapToggle();
}

进一步说：

<input className="toggleInput" type="checkbox" checked data-toggle="toggle">

Answer 3

on - 将切换设置为＆＃39; On＆＃39;国家 off - 将切换设置为＆＃39; Off＆＃39;状态

$(function () {
    var url = "https://www.youtube.com/embed/YjWIAOsndu4";
    var iframe = $("<iframe>", {
            "src": url,
            "class": "video",
            "width": "500px",
            "height": "300px",
            "frameborder": "0",
            "allowfullscreen": true
    });
    $.when($("body").append(iframe))
    .then(function (b) {
        $(window).on("click", function (e) {
            $(b).find(iframe).toggleClass("video")
        });
    });
})

使用React和Bootstrap Toggle

3 个答案: