將下一行數據從動態表中拖入ReactJS中的對話框中

Question

我有一個表格顯示json（動態）的一些記錄。當你點擊所需的行時，你會得到一個包含動作的對話框（記錄計數，拒絕，批准，關閉對話框，下一條記錄和上一條記錄）。

我幾乎所有的工作，除了下一個和prev功能。我認爲rowIndex上的++和--會進行下一次迭代（這是我的angularJS思考過程，因爲我已經在Angular中創建了這個過程，但是我們正在轉換爲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出錯了，不會加載。不過，我認爲你應該從this.state.openIndex加上/減去，而不是rowIndex。不知道你爲什麼在回調中設置開放。在React文檔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 
    }); 
}; 

此外，檢查出How to uses increment operator in React知道爲什麼你應該使用+ 1而非++。

要有條件地渲染圖標，您只需檢查當前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>