如何在Material-UI中插入新行？

我正在開發一個聯繫人應用程序，其中所有數據都暫時存儲在客戶端。我用material-ui表來顯示聯繫人。如何在Material-UI中插入新行？

當在右下角添加新的聯繫人按鈕被點擊它顯示一個對話框，在它的形式。點擊保存按鈕時，數據將保存在狀態中。但是我面臨的問題是如何在表格中插入一個新的行，其中包含表單數據。我搜索了它，但我甚至找不到關於這個問題的單個查詢。添加新聯繫人按鈕位於AddContact組件中，表位於Contacts組件中，但兩者的父組件位於Main之間。所以簡而言之，我無法在表格中顯示新的聯繫人。

來源

2017-05-29 Amanshu Kataria

你能給我們組件結構嗎？ –

@sudobangbang我已經提到了我的問題中組件的結構。 –

在state變量中保留array當您點擊對話框中的提交時，將該數據推送到state array。使用array動態生成的行，像這樣：

<Table> 
    <TableHeader> 
     <TableRow> 
      /*Define the headers*/ 
     </TableRow> 
    </TableHeader> 
    <TableBody> 
     {this._generateRows()} 
    </TableBody> 
</Table>

寫_generateRows功能這樣生成行：

_generateRows(){ 
    return this.state.data.map(el => { 
    return <TableRow> 
       <TableRowColumn>{el.a}</TableRowColumn> 
       <TableRowColumn>{el.b}</TableRowColumn> 
       <TableRowColumn>{el.c}</TableRowColumn> 
      </TableRow> 
    }) 
}

參考：Material-UI table。

備註：用原始數據替換el.a，el.b，el.c。

來源

2017-05-29 08:42:42

我看你正在使用反應。這意味着當您將渲染函數中的項目列表綁定到行組件時。現在

{list.map(item => <RowComponent key={item.id}/>)}

當你點擊按鈕所有你需要做的是push這份名單，你的新行呈現在屏幕上。

來源

2017-05-29 08:44:38 Gerben

請不要直接改變狀態變量，例如用'push'。使用組件的['setState']（https://facebook.github.io/react/docs/react-component.html#setstate）或狀態管理庫如[Redux]（http://redux.js.org）來避免組件不能完全呈現或以舊狀態呈現的問題。 –

你是對的。當您重新創建數組時，React最爲有效。所以推動時你可以先克隆數組。與splice（）例如，然後推動項目。或者像使用Redux一樣使用lib，但是在添加項目之前，您還應該創建數組的新副本。 React的變化檢測機制檢查給定對象的引用是否與React認爲它沒有改變。 – Gerben

如何在Material-UI中插入新行？

回答

相關問題