web-dev-qa-db-fra.com

Utilisation de React avec Bootstrap Toggle

Je veux utiliser bootstrap toggle à l'intérieur d'un composant React . Cependant, une case à cocher standard est affichée à la place d'un élément stylé. Comment cela pourrait-il être corrigé?

<!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
9
Stan Kurilin

Basé sur leurs docs

Vous devez connecter la fonctionnalité du plugin lorsque votre composant React est monté (lorsqu'il crache le code HTML dans le DOM)

Ajoutez un hook componentDidMount lifecycle et attribuez à l'entrée un attribut ref pour accomplir cela.

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

Si vos entrées sont ajoutées de manière dynamique, comme ce fut le cas pour moi, vous voudrez appeler la fonction dans la fonction ComponentDidUpdate.

En outre, vous obtiendrez probablement l'entrée par classe au lieu de réf.

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

Et plus loin:

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

on - Règle la bascule sur "On" 
off - Règle la bascule sur "Off"

componentDidMount: function() {

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

}
0
Marek