web-dev-qa-db-ja.com

React with Bootstrap Toggle

React コンポーネント内で bootstrap toggle を使用したいと思います。ただし、スタイル付き要素の代わりに通常のチェックボックスが表示されます。どうすれば修正できますか？

<!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>
javascripthtmltwitter-bootstrapreactjs
10
Stan Kurilin

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" />
7
Andy Ray

私の場合のように入力が動的に追加される場合は、componentDidUpdate関数で関数を呼び出す必要があります。

また、おそらく参照ではなく、クラスごとに入力を取得します。

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

そしてさらに：

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

on-トグルを「オン」状態に設定します
off-トグルを「オフ」状態に設定します

componentDidMount: function() {

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

}
0
Marek