JSX Réagir HTML5 Curseur d'Entrée Ne fonctionne pas
Je suis en utilisant React.JS pour un build, et je suis de construction d'une gamme curseur d'entrée avec deux choix pour un composant.
c'est mon code:
<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/>
Quand je la place dans mon le rendu côté client de composants et d'essayer de l'activer il ne bouge pas du tout. Des tests sur un JS/PHP build que j'ai en cours, il fonctionne très bien.
Pourquoi n'est-ce pas le travail en JSX/React.JS et ce serait un travail autour?
Merci!
Et qu'est-ce le rendu côté client composant ?
OriginalL'auteur CodeFromthe510 | 2016-03-21
Vous devez vous connecter pour publier un commentaire.
Les interactions de l'utilisateur n'ont aucun effet car un
<input>
avecvalue
prop est considéré comme contrôlé. Cela signifie que la valeur affichée est entièrement contrôlé par l'render
fonction. Ainsi fait la mise à jour de la valeur d'entrée, vous devez utiliser leonChange
événement. Exemple:Vous pouvez également utiliser
defaultValue
au lieu devalue
. Dans ce cas<input>
est considéré comme incontrôlée et de toutes les interactions de l'utilisateur sont immédiatement reflétées par l'élément lui-même sans invoquerrender
fonction de votre composant.Plus sur ce en officiel la documentation
[!] Vous devez initialiser l'état dans le constructeur lors de l'utilisation de ES6 classes, et de définir les
getInitialState
méthode lors de l'utilisation de Réagir.createClass.OriginalL'auteur xCrZx
Je pense que les réponses précédentes de résoudre votre problème. Cependant, je dirais que la solution n'a pas besoin d'impliquer Réagir unis.
La seule raison derrière votre congelés curseur d'entrée, c'est que vous avez codé en dur pour sa valeur 3, comme @Colin Whitmarsh suggère.
Simplement, cela fonctionne:
Maintenant, vous avez probablement besoin de sa sortie à faire quelque chose. Vous pouvez utiliser
onChange={this.handleChange}
@xCrZx unis dans sa réponse. Mais à l'intérieur dehandleChange
vous n'avez pas nécessairement à la mise à jour de votre état. Selon votre logique, vous pourriez éviter l'augmentation de la complexité de votre état et simplement le code de votre logique à l'intérieurhandleChange
.Si vous évitez de mettre à jour l'état, vous aurez probablement économiser de rendu et à vos performances vont s'améliorer.
OriginalL'auteur Daniel Reina
Essayez ceci:
Je suggérer de changer value="3" pour defaultValue="3", sinon je pense que la valeur est codé en dur "3" et peut être difficile ou impossible à changer. Le onInput fonction calcule la valeur et l'ajoute à l'état de sorte que les données peuvent être transmises à un autre composant ou d'une fonction. Il y a probablement une solution plus élégante à votre problème, mais le ci-dessus devrait fonctionner.
OriginalL'auteur Colin Whitmarsh