Можно ли иметь надежный компонент без настройки ввода в таблице материалов? - PullRequest
0 голосов
/ 17 марта 2020

Я использую материал таблицы компонент в разработке реакции.

Что мне сейчас нужно, так это редактируемый компонент, который учитывается между двумя другими столбцами, но я не хочу менять его на пользовательский ввод, в противном случае остальные столбцы не соответствуют стилю.

Учитывая компонент 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" }
			]
		};
	}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...