Использование React with Bootstrap Toggle

Я хочу использовать bootstrap toggle внутри компонента React. Однако вместо стилизованного элемента отображается обычный флажок. Как это можно исправить?Использование React with 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>

источник

2015-04-14 Stas Kurilin

Попробуйте использовать Реагировать Bootstrap: http://react-bootstrap.github.io/ – David

@David я не могу Toogle элемент там. –

От взгляда на демо, похоже, что код управляет DOM, что означает, что он несовместим с ReactJS, как в настоящее время написано. – WiredPrairie

основе 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" />

источник

2015-04-14 21:11:36

Я обнаружил, что это решение не удается при подключении обработчика событий к реагирующему компоненту. Кажется, 'bootstrapToggle' манипулирует DOM достаточно, чтобы создать свой собственный флажок, который не привязан к системе событий реагирования. Если я прав, то полным решением может быть переключение bootstrap в качестве компонента реакции. Если вы только полагаетесь на представления формы, то этот ответ, похоже, работает. –

Привет, Я пытаюсь решить проблему, и я получаю сообщение об ошибке: 'Uncaught TypeError: $ (...). BootstrapToggle не является функцией'. Как мне заставить это работать? –

на - Устанавливает тумблер «On» состояние
выкл - Устанавливает тумблер «Off» состояния

componentDidMount: function() { 

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

}

источник

2015-11-09 14:40:19 Marek

Если вход добавлены динамически, как это было в случае для меня, вы хотите вызвать функцию в функции componentDidUpdate.

Кроме того, вы, вероятно, получите ввод класса вместо ref.

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

И далее:

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

источник

2016-05-14 14:50:32

Использование React with Bootstrap Toggle

ответ

Смежные вопросы