Я использую материал таблицы компонент в разработке реакции.
Что мне сейчас нужно, так это редактируемый компонент, который учитывается между двумя другими столбцами, но я не хочу менять его на пользовательский ввод, в противном случае остальные столбцы не соответствуют стилю.
Учитывая компонент MTableEditField
- это поле редактирования по умолчанию со всеми стилями. Теперь, не меняя editComponent
на <input/>
, как мне реализовать onChange?
2-й вопрос: как мне выполнить вычисления в функции onChange
? Кажется, я не могу получить значение другой ячейки, когда делаю это.
Учитывая 2 столбца, столбцы free
и total
, combined
должны быть суммой этих значений. Вот текущий код.
Заранее спасибо, ребята!
class PoolTestTable extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [
{
title: "FAC (Free)",
field: "free",
type: "numeric",
editComponent: ({
onChange,
onRowDataChange,
rowData,
...p
}) => (
// HOW TO USE MTableEditField with onChange???
<MTableEditField
{...p}
onChange={newValue => (rowData.combined = newValue)}
/>
)
},
{
title: "TC (Total)",
field: "total",
type: "numeric",
editComponent: ({
onChange,
onRowDataChange,
rowData,
style,
...p
}) => (
<input
style={style}
{...p}
onChange={e => {
const newRowData = { ...rowData };
// This does not work on the newRowData.free
newRowData.combined =
e.target.value + newRowData.free;
onRowDataChange(newRowData);
}}
/>
)
},
{
title: "CC (Combined)",
field: "combined",
type: "numeric",
editable: "onUpdate"
},
{ title: "pH", field: "ph", type: "numeric" },
{ title: "ORP", field: "orp_hrr", type: "numeric" },
{ title: "TA (Alk)", field: "alk", type: "numeric" }
]
};
}