access line information, line id number and onChanged event - reactjs

Question

How can I get the line information and id number I want to edit.
Also how can I access the onChanged event?
Can you help me ?
I want to get the line information I want to edit.
I want to get the id number of the line I want to edit.
How can I access onChanged events? So how can I understand when textfield changes?
`
import React, { Component } from "react";
import Paper from '#material-ui/core/Paper';
import { EditingState,SearchState,IntegratedFiltering, GroupingState, IntegratedGrouping,} from '#devexpress/dx-react-grid';
import { ColumnChooser, Grid, Table, TableColumnResizing, TableColumnVisibility, TableEditColumn, TableEditRow, TableFixedColumns, TableHeaderRow, Toolbar, SearchPanel, TableGroupRow, GroupingPanel, DragDropProvider,} from '#devexpress/dx-react-grid-material-ui';
class UserInformation extends Component {
constructor(props) {
super(props);
this.state = {
isLoaded: true,
columns: [
{name: 'name', title: 'Name'},
{name: 'city', title: 'city'}
],
rows : [
{ sex: "Female", name: "Sandra", city: "Las Vegas", car: "Audi A4" },
{ sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" },
{ sex: "Male", name: "Mark", city: "Paris", car: "Honda Accord" },
{ sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" },
{ sex: "Female", name: "Linda", city: "Austin", car: "Toyota Corolla" }
]
};
this.commitChanges = this.commitChanges.bind(this);
//this.getRowId = this.getRowId.bind(this);
}
}
commitChanges({ added, changed, deleted }) {
let { rows } = this.state;
let changedRows;
if (added) {
console.log("added")
}
if (changed) {
changedRows = rows.map(row => (changed[row.id] ? { ...row, ...changed[row.id] } : row));
console.log("changed");
console.log(rows.map(row => (changed[row.id])))
}
if (deleted) {
console.log("deleted")
}
};
//getRowId(row) {
// console.log(this.state.rows.indexOf(row));
// return this.state.rows.indexOf(row);
//}
render() {
const { isLoaded, drList, rows, columns } = this.state;
if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div className={"animated fadeIn "}>
<Row>
<Paper>
<Grid
rows={rows}
columns={columns}
getRowId={this.getRowId}
>
<EditingState
onCommitChanges={this.commitChanges}
/>
<Table
/*columnExtensions={tableColumnExtensions}*/
/>
<TableHeaderRow />
<TableEditRow />
<TableEditColumn
showAddCommand
showEditCommand
showDeleteCommand
/>
</Grid>
</Paper>
</Row>
</div>
);
}
}
}
export default UserInformation;