React JS材料表根據其他兩列的值自動生成一列的值

Question

我想通過乘以Quantity和List Price來呈現Value列數據。

我找到了一種方法來做到這一點。 但是當我在 material-table 中控制台記錄數據（ data是給 material-table data prop 的數組）時，它沒有顯示名為Value的字段。 這意味着即使我們可以在 material-table 中看到Value ，它也不會被推送到數據數組中。 下面是控制台日志的圖像。

有人可以幫幫我嗎。 我希望使用Value的值更新數據數組。

 columns = { [{ title: "Prod. ID", field: "productid", editComponent: props => ( < Autocomplete options = { selectedProductOptions } getOptionLabel = { (option) => option.productid } inputValue = { props.value || '' } onChange = { e => props.onChange(e.target.innerText) } renderInput = { (params) => < MuiTextField { ...params } helperText = { props.helperText } error = { props.error } variant = "standard" / > } /> ), validate: (rowData) => ( rowData.productid === undefined ? { isValid: false, helperText: 'Required *' } : rowData.productid === '' ? { isValid: false, helperText: 'Required *' } : true ), }, { title: "Description", field: "description", editComponent: props => ( < Autocomplete options = { selectedProductOptions } getOptionLabel = { (option) => option.name } onChange = { e => props.onChange(e.target.innerText) } inputValue = { props.value || '' } renderInput = { (params) => < MuiTextField { ...params } helperText = { props.helperText } error = { props.error } variant = "standard" / > } /> ), validate: (rowData) => rowData.description === undefined ? { isValid: false, helperText: 'Required *' } : rowData.description === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "Unit", field: "unit", lookup: { Case: 'Case', Pieces: 'Pieces' }, width: 'min-content', validate: (rowData) => rowData.unit === undefined ? { isValid: false, helperText: 'Required *' } : rowData.unit === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "Quantity", field: "quantity", type: 'numeric', cellStyle: { cellWidth: 'min-content' }, validate: (rowData) => rowData.quantity === undefined ? { isValid: false, helperText: 'Required *' } : rowData.quantity === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "List Price (Rs.)", field: "listprice", type: 'numeric', cellStyle: { cellWidth: 'min-content' }, validate: (rowData) => rowData.listprice === undefined ? { isValid: false, helperText: 'Required *' } : rowData.listprice === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "Value (Rs.)", field: "value", type: 'numeric', cellStyle: { width: 'min-content' }, editable: 'never', render: rowData => rowData.quantity * rowData.listprice, } ] }

Answer 1

 { title: "Quantity", field: "quantity", type: 'numeric', cellStyle: { cellWidth: 'min-content' }, editComponent: props => < MuiTextField onChange = { e => { var data = { ...props.rowData }; data.quantity = e.target.value; let quantity = isNaN(data.quantity) ? 0 : data.quantity; let listprice = isNaN(data.listprice) ? 0 : data.listprice; data.value = quantity * listprice; props.onRowDataChange(data); } } helperText = { props.helperText } error = { props.error } variant = "standard" / > , validate: (rowData) => rowData.quantity === undefined ? { isValid: false, helperText: 'Required *' } : rowData.quantity === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "List Price (Rs.)", field: "listprice", type: 'numeric', cellStyle: { cellWidth: 'min-content' }, editComponent: props => < MuiTextField onChange = { e => { var data = { ...props.rowData }; data.listprice = e.target.value; let quantity = isNaN(data.quantity) ? 0 : data.quantity; let listprice = isNaN(data.listprice) ? 0 : data.listprice; data.value = quantity * listprice; props.onRowDataChange(data); } } helperText = { props.helperText } error = { props.error } variant = "standard" / > , validate: (rowData) => rowData.listprice === undefined ? { isValid: false, helperText: 'Required *' } : rowData.listprice === '' ? { isValid: false, helperText: 'Required *' } : true }, { title: "Value (Rs.)", field: "value", type: 'numeric', cellStyle: { width: 'min-content' }, editable: 'never', }

我想出了答案。

我們必須使用props.onRowDataChange() 。

正如您在這里看到的，我們從props獲取rowData並將其解構並將其保存在一個名為data的變量中（ rowData是一個對象數組，因為我們手動更改了listprice ， quantity我們在此處插入了此代碼），然后我們執行我們想做的改變。 在我的情況下，我想通過乘以數量和清單價格來獲得價值。 一旦更改完成。 我們props.onRowDataChange()新數據傳遞給props.onRowDataChange() 。

如果您需要更多解釋，請隨時詢問。