将 React 与 Bootstrap 切换一起使用

Posted 2023-03-05

技术标签:

【中文标题】将 React 与 Bootstrap 切换一起使用【英文标题】：Using React with Bootstrap Toggle 【发布时间】：2015-06-20 14:29:43 【问题描述】：

我想在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>

【问题讨论】：

尝试使用 React Bootstrap：react-bootstrap.github.io @David 我不能在那里转换元素。从demo看，代码好像在操作DOM，这意味着它与当前编写的ReactJS不容易兼容。 @WiredPrairie 很伤心。我可以指定他们操作 DOM 或做一些其他聪明的事情的顺序吗？没有。如果您查看@David 的建议，您会发现它生成的 HTML 与 Bootstrap 对给定组件所做的完全匹配。它不会在运行时被操纵/变形。 【参考方案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" />

【讨论】：

我发现这个解决方案在将事件处理程序附加到反应组件时失败。似乎bootstrapToggle 操作 DOM 足以创建自己的复选框，该复选框与反应事件系统无关。如果我是正确的，那么一个完整的解决方案可能是将引导切换重写为 reactjs 组件。如果您只依赖表单提交，那么这个答案似乎有效。嗨，我正在尝试解决方案，但出现错误：Uncaught TypeError: $(...).bootstrapToggle is not a function。我如何让它发挥作用？【参考方案2】：

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

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

componentDidUpdate()

    $('.toggleInput').bootstrapToggle();

还有：

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

【讨论】：

【参考方案3】：

on - 将切换设置为“开启”状态 off - 将切换设置为“关闭”状态

componentDidMount: function() 

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

【讨论】：

以上是关于将 React 与 Bootstrap 切换一起使用的主要内容，如果未能解决你的问题，请参考以下文章

将 Jquery 和 Bootstrap 与 Es6 Import 一起用于 React App

React-Bootstrap 样式未与故事书一起加载

React bootstrap 响应式设计无法与 react hooks 和 alan AI 一起使用

如何将 React Context API 与 useReducer 一起使用以遵循与 Redux 类似的风格 [关闭]

将 Font Awesome 5 与 Bootstrap 3 折叠组件一起使用——在折叠时更改箭头图标？

无法使 react-hot-loader 和 webpack-dev-server 与 react-router 一起工作