2017-01-08 11 views
0

最近、Reactの学習が始まりました。コンポーネントにデータグリッドがあります。行をクリックするとイベントが発生しました。イベントハンドラでは、行の小道具(クリックされた行の各列の値)を取得できました。ですから、私が達成したいのは、フォームコンポーネントに3つのボタンがあり、グリッドのonClick of Rowが有効になります。私は各ボタンの新しいページonClickに移動したいので、グリッドで選択された行に対して異なるアクションを実行します。私が直面している問題は、これらのボタンを使用して異なる操作を実行するためにRow値が必要なので、どのようにRow Propsをすべての3つのボタンのハンドラに渡すことができるかです。渡された小道具の保管方法Reactでのイベントのクリック

onRowclick = (row) => 

{ 
    this.context.route.push(`path\${row.ID}`); 
} 

onButton1click = (row) => 
{ 
    this.context.route.push(`path\${row.ID}`); 
} 
. 
. 
. 
onButton3click = (row) => 
{ 
    this.context.route.push(`path\${row.ID}`); 
} 

私はすべての3つのイベントハンドラでrow.IDを必要とするが、私はコンポーネント全体でこれを使用することができるようになりますように状態でこれを格納するために彼らのいくつかの方法ですか。?

UPDATE:以下は、この

constructor(props) { 
    super(props); 
    this.state = this.getInitState(props); 
    this.intitialize(); 
    } 

    intitialize(){ 
     this.selectedRow = {}; 
    } 

    getInitState(props) { 
     return {selectedRow: undefined}; 
        } 
// on Row click storing the row object(which contains row data) 
onRowClick = (row) => { 

    this.selectedRow = row; 

} 

を達成するためのコードが、私はそれがREDUXを使用する時間だと思うリアクト

+0

コード – Codesingh

+0

を共有してください子(ボタン)に親(行)から小道具を渡すために数多くの方法があります。行がどのように子コンポーネントを作成または受け取るかによって、その小道具を渡す最善の方法が決まります。 –

+0

ありがとう@RobLynch。私は解決策を追加した – mayuri

答えて

1

の非常に基本的です。

Reduxは反応フレームワークであり、オブジェクトに状態を格納するために使用されます。 Reduxはオブジェクトのツリーを作成し、減速器を使用し、アクションの助けを借りて状態を保存することによって、アプリケーションを通してあらゆる状態を取り出すことができます。

Reduxには、アプリケーションのすべての状態を格納するストアがあります。これを読んでください再来について

は、完全な詳細を知るために: http://redux.js.org/

関連する問題