Estoy tratando de agregar un botón dentro de mi fila de cuadrícula de datos de interfaz de usuario de material.
Mi componente de cuadrícula de datos
<DataGrid rows={adminStorage} columns={columns} autoPageSize getRowId={(logistics) => logistics._id } autoHeight headerHeight={60} pageSize={100} className={classes.root} />la columna
{ ... field: "update", align:"left", headerAlign: "left", headerName: "Update", renderCell: (cellValues) => { return ( <Button pL={2} onClick={updateHandler} variant="contained" color="primary"> update </Button> ) } },el controlador de actualización
const updateHandler = (cellvalues) => { console.log("The data botained fron the handler is", cellvalues) }Quiero que funcione de tal manera que cuando se haga clic en el botón, se vincule a otra página que tenga un formulario de edición, además de obtener ese objeto de fila específico y su identificación.
¿Qué tengo que hacer?
React sigue siendo javascript, de acuerdo con react https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers puedes
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>En ambos casos, el argumento e que representa el evento React se pasará como segundo argumento después del ID. Con una función de flecha, tenemos que pasarla explícitamente, pero con bind, cualquier argumento adicional se reenvía automáticamente.
También puede recuperar más datos del elemento en el que se hizo clic utilizando el evento pasado y el atributo de destino como
const updateHandler = (event) => { let element = event.target; console.log("The data botained fron the handler is", element.getAttribute("attribute")) }