bootstrap-select 样式不起作用

Question

我已经安装了 Bootstrap-Select 包，版本 1.13.1.

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

问题

我想在我的 reactJS + Bootstrap 项目中实现多个 select 功能。但是，样式似乎与文档示例中显示的样式不同。我的仍然显示 'basic' 类型的样式。

我错过了什么？

我做了什么

我在我的 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 库。我也应该这样做吗？如果是，如何？

Answer 1

到处把class换成className因为JSX不支持classattribute在[=16=中换成了className ].

<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 样式不起作用

bootstrap-select styling not working

twitter-bootstrap

reactjs

bootstrap-select