web-dev-qa-db-ja.com

フラックスなしのReact（JSX）での子から親へのコミュニケーション

私はReactに本当に慣れていないので、単純な問題のように思われる問題を解決するために髪の毛を抜いています。これが私が作ったコンポーネントの写真です。

カラーピッキングコンポーネント

私が達成しようとしていることは些細なことのように思えますが、文字通り私が読んだすべての記事で何をすべきかを説明しているので、何か違うことがわかり、解決策の1つがうまくいきませんでした。これに分解されます。ユーザーがタグをクリックすると、トレイが作成され、色の配列をループしてカラーボタンが作成されます。カラーボタンがクリックされると、クリックされたカラーを親コンポーネントに渡し、関数を実行してそのカラーを更新する必要があります。フラックス、イベントバブリング、「これ」をプロパティにバインドすることについて読みましたが、これらのソリューションはどれも機能していないようです。 Reactドキュメントは、基本的に私のような初心者には役に立ちません。既存のアプリにいくつかの単純なコンポーネントを追加しているので、この時点ではフラックスのような複雑なイベント構造を避けたいと思います。書き込みReact元々。

また、PS、このコードはJSXにあり、ストレートJSが反応するよりもはるかに理にかなっています。よろしくお願いします！

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>
        )
    }
})
javascriptreactjsreact-jsxjsx
9
Chris Patty

コールバック関数が機能するはずです。以前のコメントで述べたように、キャプチャしたthisを使用して、子からupdateColor関数にアクセスできます。

var passTarget = this;
...
...
return <ColorButton 
  buttonColor={object} 
  key={i} 
  update={passTarget.updateColor} />

または、Bogdanが述べたように、コールバック関数の後にマップを通過させることができます。

{colorsArray.map(function(object, i){
  return <ColorButton 
           buttonColor={object} 
           key={i} 
           update={this.updateColor} />;
}, this)}

きみの <ColorButton />コンポーネントは、単純なonClick関数を実行できるはずです。

onClick={this.props.update}

次に、親コンポーネントの通常のイベントターゲットを使用して、クリックされたボタンの色をキャプチャできます。

updateColor: function(e) {
  console.log(e.target.style.backgroundColor);
}

ここに完全な [〜＃〜]デモ[〜＃〜] を示します。

7
Brad Colthurst

次のように簡単に、親コンポーネントから子にコールバック関数を渡すことができます。

_ <ColorButton buttonColor={object} key={i} onColorSelect={this.updateColor}/>
_

（React.createClassを使用する場合、すべてのクラスメソッドはすでにthisにバインドされているため、.bind(this)を呼び出す必要はありません）。

次に、ColorButtonコンポーネントから、このコールバックをthis.props.onColorSelect(...)として呼び出すことができます。

JSビンの例： http://jsbin.com/fivesorume/edit?js,output

3
Bogdan Savluk

OK、これはReactではfluxまたはreduxを使用せずに非常に簡単です。これは、親から子に小道具を渡すのと同じです。次のようなコールバック関数を使用できます。

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];


var EditDrawer = React.createClass({
    updateColor: function(i) {
        alert("New Color: " + i);
    },
    render: function(){
        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} updateColor={this.updateColor}/>;
                        }, this)}
                    </div>
                </div>
            </div>
        );
    }
});


var ColorButton = React.createClass({
    updateColor: function() {
        this.props.updateColor(this.props.buttonColor);
    },
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" 
            style={buttonStyle}
            onClick={this.updateColor}>
              this.props.buttonColor
            </div>
        )
    }
});
1
Alireza