将 React 与 Bootstrap 切换一起使用

Question

我想使用 bootstrap toggle inside a 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

on - 将切换设置为 'On' 状态
off - 将切换设置为 'Off' state

componentDidMount: function() {

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

}

Answer 3

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

此外，您可能会通过 class 而不是 refs 获得输入。

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

还有：

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

将 React 与 Bootstrap 切换一起使用

Using React with Bootstrap Toggle

html

javascript

twitter-bootstrap

reactjs