De l'enfant à la communication avec les parents à Réagir (JSX), sans flux
Je suis vraiment nouveau pour Réagir, et je suis en tirant mes cheveux en essayant de résoudre ce qui me semble être un problème simple. Voici une photo du composant que j'ai construit.
La Sélection Des Couleurs Composant
Ce que je suis en train d'accomplir semble trivial, mais littéralement chaque article que j'ai lu en expliquant quoi faire m'a dit quelque chose de différent, et pas l'une des solutions a travaillé. Il se décompose à ceci: Quand un utilisateur clique sur un tag, il construit un bac et d'une boucle dans un tableau de couleurs pour construire des touches de couleur. Lorsqu'une couleur de bouton est cliqué, il faut passer la couleur qui a été cliqué à son composant parent et d'exécuter une fonction de mise à jour de sa couleur. J'ai lu sur le flux, la remontée d'événements, de liaison "ce" à une propriété, et aucune de ces solutions a semblé fonctionner. La Réagir docs sont fondamentalement inutile pour un débutant comme moi. Je veux éviter de compliqué cas de structures comme les flux au niveau de ce point puisque je suis ajoutant quelques composants simples pour une application existante que je n'ai pas écrit à Réagir à l'origine.
Aussi, PS, Ce code est dans JSX qui fait beaucoup plus de sens pour moi que le droit JS réagir. Merci d'avance pour votre aide!
var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];
var EditDrawer = React.createClass({
updateColor: function() {
console.log("New Color: " + i);
},
render: function(){
var passTarget = this;
return (
<div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
<div className="row">
<div className="col-xs-12">
{colorsArray.map(function(object, i){
return <ColorButton buttonColor={object} key={i} />;
})}
</div>
</div>
</div>
);
}
})
var ColorButton = React.createClass({
render: function(){
var buttonStyle = {
backgroundColor: this.props.buttonColor,
};
return (
<div className="tag-edit-color-button" style={buttonStyle} >
</div>
)
}
})
OriginalL'auteur Chris Patty | 2016-05-20
Vous devez vous connecter pour publier un commentaire.
La fonction de callback doit travailler. Comme vous l'avez mentionné dans votre précédent commentaire vous pouvez utiliser votre capturé
this
pour accéder à laupdateColor
fonction de l'enfant:Ou comme Bogdan mentionné, vous pouvez passer par le biais de la carte après votre fonction de rappel:
Votre
<ColorButton />
composant doit ensuite être en mesure d'exécuter une simple onClick function:Et puis vous pouvez tout simplement faire usage normal des événements cibles dans le composant parent pour capturer la couleur du bouton qui a été cliqué:
Voici une DÉMO à démontrer.
Cela a fonctionné à merveille, merci beaucoup pour l'aide!
OriginalL'auteur Brad Colthurst
Vous pouvez simplement transmettre fonction de callback dans l'enfant de vos parents, composant, aussi simple que cela:
(lors de l'utilisation de Réagir.createClass toutes les méthodes de la classe sont déjà liés à
this
, de sorte que vous ne sont pas tenus d'appel.bind(this)
).Puis, à partir de
ColorButton
composant vous pouvez appeler cette fonction de rappel qu'this.props.onColorSelect(...)
.JS Bin exemple: http://jsbin.com/fivesorume/edit?js,sortie
onClick={this.props.onColorSelect(this.props.buttonColor)}
sortiessur la transmission
this
dans le Tableau.carte - vous pouvez également passer en tant que second argument.map(function..., this)
, puis ce de l'extérieur de la portée serait utilisé. SuronClick={this.props.onColorSelect(this.props.buttonColor)}
, vous n'êtes pas en passant fonction - vous êtes en l'appelant au cours de rendu et le résultat le passage. Vous devez créer fonction spécifique dans votre composant.Cela fait beaucoup de sens. Je vais faire un essai la semaine prochaine. Merci pour votre aide!
OriginalL'auteur Bogdan Savluk
OK, c'est assez simple, dans Réagir sans l'aide de
flux
ouredux
, semblable à la transmission des accessoires de parent à enfant, ici, nous pouvons utiliser la fonction de rappel comme ceci:OriginalL'auteur Alireza