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>
        )
    }
})
Comme une note, voici deux techniques que j'ai essayé de l'utiliser mais il n'était travail. haochuan.io/... andrewhfarmer.com/component-communication/#3-callback-functions

OriginalL'auteur Chris Patty | 2016-05-20