動的テーブルからReactJSのダイアログにデータの次の行を引き出す

Question

json（動的）からのいくつかのレコードを表示するテーブルがあります。目的の行をクリックすると、その中にアクションのあるダイアログが表示されます（レコード数、拒否、承認、クローズダイアログ、次のレコード、前のレコード）。

私は、次の機能と以前の機能を除いて、すべて機能しています。私は、rowIndexの++と--は、次の繰り返しをフェッチすると考えていました（これは私が既にAngularで作成したものですが、これは私のangularJS思考プロセスですが、ReactJSに変換しています） 。

これらは、しかし、あなたがそれで遊ぶために使用することができます私のwebpackbinでミニマルなコードスニペットを見ることができ、私が作成した関数です。ここで

//Pull the next item 
handleApprovalDialogNext = (rowIndex, openIndex, event) => { 
    this.setState(
     { 
      openIndex: rowIndex++, 
     },() => {this.setState({ open: true })} 
    ) 
}; 

//Pull the prev item 
handleApprovalDialogPrev = (rowIndex, openIndex, event) => { 
    this.setState(
     { 
      openIndex: rowIndex--, 
     },() => {this.setState({ open: true })} 
    ) 
}; 

は私のwebpackbin

へのリンクです

ps理想的には、項目が最初の項目の場合は、戻ることを許可しないでください（おそらく、矢印アイコンを無効にする）。あなたがデータの終わりに達すると同じこと。

本当にありがとうございます。

Answer 1

あなたはwebpackbinにエラーが発生しており、読み込まれません。しかし、rowIndexではなく、this.state.openIndexから加算/減算する必要があります。なぜコールバックで開いているのかわかりません。 React docs https://facebook.github.io/react/docs/react-component.html#setstateにSetstateコールバックは推奨されません。

//Pull the next item 
handleApprovalDialogNext = (rowIndex, openIndex, event) => { 
    this.setState({ 
     openIndex: this.state.openIndex + 1, 
     open: true 
    }); 
}; 

//Pull the prev item 
handleApprovalDialogPrev = (rowIndex, openIndex, event) => { 
    this.setState({ 
     openIndex: this.state.openIndex - 1, 
     open: true 
    }); 
}; 

はまた、あなたが ++ではなく + 1を使うべき理由を知り How to uses increment operator in Reactをチェックしてください。

アイコンを条件付きでレンダリングするには、現在のopenIndexがデータの最初または最後のインデックスであるかどうかを確認するだけです。

は、それはこのようになります：

<Col className="floating-close layout-column"> 
    <IconButton> 
     <i className="material-icons">close</i> 
    </IconButton> 
    {this.state.openIndex > 0 && 
    <IconButton> 
     <i className="material-icons left">chevron_left</i> 
    </IconButton>} 
    {this.state.openIndex < approvalsData.length && 
    <IconButton> 
     <i className="material-icons right">chevron_right</i> 
    </IconButton>} 
</Col>