Question

我已经安装了Bootstrap-Select软件包，版本1.13.1。

https://silviomoreto.github.io/bootstrap-select/

问题

我想在reactJS + Bootstrap项目中实现多个选择功能。但是，样式似乎与文档示例中显示的样式不同。我仍然表现出“基本”的风格。

我错过了什么？

我做了什么

我已将下面的内容放在我的jsx文件中。

class MyTestBox extends React.Component {
//blah blah
render() {
//blah blah
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <select class="selectpicker form-control" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
</div>
}}

var MyTestBox = ReactDOM.render(
    <MyTestBox />,
    document.getElementById('content')
);

这是我的cshtml文件。

@{
    ViewBag.Title = "Hello World";
}

//blah blah
<div id="content"></div>

@Scripts.Render("~/bundles/myTestBundle")
<script type="text/javascript">
    $(function () {
        $('.selectpicker').selectpicker();
    });
</script>

根据其他帖子，似乎我仍然需要在某处添加URL来引用bootstrap-select库。我也应该这样做吗？如果有，怎么样？

Bootstrap Select style and search not working

Bootstrap select picker style not working

Answer 1

将class替换为className，因为JSX不支持class attribute它已被className中的JSX取代。

<div class="row">

到

<div className="row">

您可以使用componentDidMount但我会一次又一次初始化selectpicker代码，这样如果您的插件可以正常使用，那么请使用

class abc extent React.Component{
    componentDidMount(){
      $('.selectpicker').selectpicker();
    }
}

//第二个选项

使用window.onload在您的应用完全就绪时初始化您的代码

<script>
window.onload = function(){
      $('.selectpicker').selectpicker();
}
</script>

bootstrap-select样式不起作用

1 个答案: