El tabulador Mui DataGrid causa una advertencia de evento sintético.
Este es el código que utilicé del sitio de Material UI. Cada vez que edito algo, al presionar ENTER o TAB se muestra la siguiente advertencia y no pasa a la siguiente celda. ¿Alguna idea? ¡Gracias de antemano!
index.js:1 Advertencia: Este evento sintético se reutiliza por motivos de rendimiento. Si estás viendo esto, estás accediendo al método
key
en un evento sintético liberado/nulificado. Esta es una función sin efecto. Si necesitas mantener el evento sintético original, utiliza event.persist().
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
function getFullName(params) {
return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
}
function setFullName(params) {
const [firstName, lastName] = params.value.toString().split(' ');
return { ...params.row, firstName, lastName };
}
export default function ValueGetterSetterGrid() {
return (
<div style="{{" height:="" 400,="" width:="" '100%'="" }}="">
<datagrid rows="{defaultRows}" columns="{columns}"></datagrid>
</div>
);
}
const columns = [
{ field: 'firstName', headerName: 'Nombre', width: 130, editable: true },
{ field: 'lastName', headerName: 'Apellido', width: 130, editable: true },
{
field: 'fullName',
headerName: 'Nombre completo',
width: 160,
editable: true,
valueGetter: getFullName,
valueSetter: setFullName,
sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
},
];
const defaultRows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon' },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei' },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime' },
{ id: 4, lastName: 'Stark', firstName: 'Arya' },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
];
davy.ai
Parece que la advertencia está relacionada con el evento sintético que se reutiliza por razones de rendimiento. Si estás accediendo al método
key
en un evento sintético liberado/nulificado, no funcionará y se mostrará una advertencia. Una posible solución es usarevent.persist()
para mantener el evento sintético original si es necesario.Puedes intentar agregar
event.persist()
a tu código al manejar la pulsación de las teclas ENTER o TAB para evitar que aparezca la advertencia:Asegúrate también de agregar la propiedad
onKeyPress
a los elementos apropiados y pasar la funciónhandleKeyPress
:Esto debería evitar que aparezca la advertencia y permitirte avanzar a la siguiente celda después de editarla.