Utilizzo di React con Toggle Bootstrap

Desidero utilizzare bootstrap toggle all'interno di un componente React. Tuttavia, viene visualizzata una casella di controllo normale anziché un elemento con stile. Come potrebbe essere risolto?Utilizzo di React con Toggle Bootstrap

<!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>

fonte

2015-04-14 Stas Kurilin

Prova utilizzando React Bootstrap: http://react-bootstrap.github.io/ – David

@ David non posso elemento toogle lì. –

Guardando la demo, sembra che il codice manipoli il DOM, il che significa che non è facilmente compatibile con ReactJS come attualmente scritto. – WiredPrairie

Sulla base their docs

È necessario cablare le funzionalità del plugin quando il Reagire monta componenti (quando sputa fuori il codice HTML nel DOM)

Aggiungi un gancio del ciclo di vita componentDidMount e dare il inserire un attributo ref per ottenere ciò.

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" />

fonte

2015-04-14 21:11:36

Ho trovato che questa soluzione ha esito negativo quando si collega un gestore di eventi al componente di reazione. Sembra che 'bootstrapToggle' manipoli il DOM abbastanza da creare una propria casella di controllo che non sia legata al sistema degli eventi di reazione. Se sono corretto, una soluzione completa può essere una riscrittura del bootstrap che attiva come componente reactjs. Se ti stai affidando solo ai moduli inviati, questa risposta sembra funzionare. –

Ciao, sto provando la soluzione e ottengo un errore: 'Uncaught TypeError: $ (...). BootstrapToggle non è una funzione'. Come faccio a far funzionare questo? –

on - Imposta la levetta su 'On' stato
fuori - Imposta la levetta su 'Off' stato

componentDidMount: function() { 

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

}

fonte

2015-11-09 14:40:19 Marek

Se il vostro input vengono aggiunti in modo dinamico, come è stato il caso per me, ti consigliamo di chiamare la funzione nella funzione componentDidUpdate.

Inoltre, probabilmente si otterrà l'input per classe anziché per ref.

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

E ancora:

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

fonte

2016-05-14 14:50:32

Utilizzo di React con Toggle Bootstrap

risposta

Problemi correlati