Question

132

Using React with Bootstrap Toggle

rated 0 times [ 134] [ 2] / answers: 1 / hits: 26584 / 9 Years ago, tue, april 14, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 9 Years ago brynneg · Accepted Answer

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)

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 />