À l'aide de Réagir avec Bootstrap Bascule
Je veux utiliser bootstrap bascule à l'intérieur d'un Réagir composant. Cependant régulièrement case à cocher est affichée à la place d'un élément de style. Comment pourrait être fixé?
<!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>
Essayez d'utiliser Réagir Bootstrap: réagissent-bootstrap.github.io
je ne peux pas l'élément à bascule.
En regardant la démo, il semble que le code qui manipule le DOM, ce qui signifie qu'il n'est pas facilement compatible avec ReactJS tel qu'il est actuellement rédigé.
que c'est triste. Puis-je spécifier l'ordre dans avec ils vont manipuler le DOM ou faire autre chose d'intelligent?
Pas de. Si vous regardez @David suggestion, vous verrez que cela génère du code HTML qui correspond exactement à ce que Bootstrap aurait fait pour un composant donné. Il n'est pas manipulé/transformé au moment de l'exécution.
je ne peux pas l'élément à bascule.
En regardant la démo, il semble que le code qui manipule le DOM, ce qui signifie qu'il n'est pas facilement compatible avec ReactJS tel qu'il est actuellement rédigé.
que c'est triste. Puis-je spécifier l'ordre dans avec ils vont manipuler le DOM ou faire autre chose d'intelligent?
Pas de. Si vous regardez @David suggestion, vous verrez que cela génère du code HTML qui correspond exactement à ce que Bootstrap aurait fait pour un composant donné. Il n'est pas manipulé/transformé au moment de l'exécution.
OriginalL'auteur Stan Kurilin | 2015-04-14
Vous devez vous connecter pour publier un commentaire.
Basé sur leurs docs
Vous avez besoin de câbler le plugin de fonctionnalités lors de vos Réagir composant de fixation (quand il crache le HTML dans les DOM)
Ajouter un
componentDidMount
du cycle de vie de crochet et de donner à l'entrée d'unref
attribut pour accomplir cette tâche.bootstrapToggle
manipule le DOM suffisant pour créer sa propre case qui n'est pas liée à la réagir système d'événements. Si je suis correct, puis une solution complète peut être une réécriture de bootstrap basculer comme un reactjs composant. Si vous êtes seulement en s'appuyant sur les soumissions de formulaire, puis cette réponse semble fonctionner.Salut, je vais essayer la solution et j'obtiens une erreur:
Uncaught TypeError: $(...).bootstrapToggle is not a function
. Comment puis-je obtenir que cela fonctionne?OriginalL'auteur Andy Ray
Si vos commentaires sont ajoutés dynamiquement comme c'était le cas pour moi, vous aurez envie d'appeler la fonction dans le componentDidUpdate fonction.
Aussi, vous aurez alors probablement obtenir l'entrée en classe au lieu de refs.
Et plus loin:
OriginalL'auteur Ryan Pergent
sur - Ensembles de la bascule à l'état
des hors - Séries de l'interrupteur à " Off " de l'état
OriginalL'auteur Marek