стиль начальной загрузки не работает - PullRequest
Новая
       24

стиль начальной загрузки не работает

0 голосов
/ 22 мая 2018

Я установил пакет Bootstrap-Select, версия 1.13.1.

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

ПРОБЛЕМА

Я хочу добиться множественного выборафункциональность в моем проекте ReactionJS + 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 Выбрать стиль и поиск не работает

Bootstrap выбрать стиль выбора не работает

1 Ответ

0 голосов
/ 22 мая 2018

Замените 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>
...