Я хочу отобразить данные столбца Значение , умножив Количество и Прейскурантную цену .
И я нашел способ сделать это. но когда я консоль регистрирую данные ( данные - это массив, заданный для свойства данных таблицы материалов) в таблице материалов, он не показывает поле с именем Значение . Это означает, что даже если мы видим Значение в таблице материалов, оно не помещается в массив данных . Ниже представлено изображение журнала консоли.
Кто-нибудь может мне помочь. Я хочу, чтобы в массив данных было добавлено значение Значение .
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,
}
]
}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().
Как вы можете видеть здесь, мы получаем rowData из props, деструктурируем его и сохраняем в переменной с именем data (rowData - это массив объектов, и поскольку мы вручную вносим изменения в listprice, quantity мы вставляем здесь этот код), а затем вносим необходимые изменения. в моем случае я хотел получить значение, умножив количество и цену списка. Как только изменения будут сделаны. мы собираемся передать новые данные в props.onRowDataChange().
Если вам нужно больше объяснений, не стесняйтесь спрашивать.
Здесь я получил ответ от https://github.com/mbrn/material- таблица/вопросы/615