我在React + Redux应用程序中使用最新的agGrid企业版。
问题是我正在使用内置的agGrid编辑,这是直接修改底层数据,即从redux存储返回的数组。这违反了不变性原则。有没有办法使用/配置agGrid no来修改数据,但是可以:
谢谢
编辑:扩展我的答案与更多细节。
您必须设置一个“ valueSetter”函数,并将其设置在每一列上。最简单的方法是使用defaultColDef。快速说明,表中的每一行都是“交易”,因此您将看到对交易的引用以及其他形式的标识。
例如:
<AgGridReact // OPTIONS REQUIRED FOR OPTIMIZATION WITH REACT reactNext deltaRowDataMode getRowNodeId={data => data.transaction_id} // OTHER OPTIONS rowSelection="multiple" editType="fullRow" // TABLE DATA defaultColDef={{ ...defaultColDef, valueSetter }} columnDefs={columns} rowData={transactions} // DISPLAY rowClassRules={rowClassRules} // EVENTS onGridReady={onGridReady} onRowEditingStarted={onRowEditingStarted} onRowEditingStopped={onRowEditingStopped} />
不要忘记react和redux所需的优化项。(reactNext,deltaRowDataMode,getRowNodeId)。
我定义的defaultColDef很简单:
defaultColDef: { resizable: true, sortable: true, filter: true, editable: true, },
valueSetter是一个非常简单定义为的函数:
const valueSetter = (params) => { allActions.columnEdit(params.data, params.oldValue, params.newValue, params.colDef); return false; };
allActions.columnEdit只是调用我在导入中定义的Redux操作,然后与connect()和mapDispatchToProps绑定。返回false是防止状态发生变化所需的条件。确保您的redux操作可以处理您需要执行的所有操作。这是我的示例:
case actionTypes.COLUMN_EDIT: { // FOR EACH COLUMN EDITED, CHECK IF ANYTHING CHANGED // POST CHANGES TO NEW STATE if (payload.oldValue !== payload.newValue) { const account = 'acct01'; const column = payload.colDef.field; const index = state[account].transactions.findIndex( t => t.transaction_id === payload.t.transaction_id, ); return produce(state, (draft) => { const transaction = draft[account].transactions[index]; transaction[column] = payload.newValue; }); } return state; }
希望这可以帮助。对于Ag-Grid应该直接处理的问题,似乎有很多额外的解决方法,但也许他们会在其中进行一些未来的开发。
https://www.ag-grid.com/javascript-grid-value-setters/