0

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

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 が必要です。コンポーネント全体でこれを使用できるように、これを状態に格納する方法はありますか?

更新：以下はこれを達成するためのコードです

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;

 }

Reactの非常に基本的な

4

1 に答える 1

1

REDUXを使う時が来たと思います。

Redux は React フレームワークであり、状態をオブジェクトに格納するために使用されます。Redux はオブジェクトのツリーを作成し、レデューサーを使用してアクションを使用して状態を保存することで、アプリケーションから任意の状態を取得できます。

Redux には、アプリケーションのすべての状態を格納するストアがあります。

redux の詳細については、http://redux.js.org/ をお読みください。

于 2017-01-08T19:00:21.547 に答える