这是我从材料 UI 站点使用的代码。每次我编辑某些内容时,按 ENTER 或 TAB 都会导致以下警告,并且不会进入下一个单元格。有任何想法吗?蒂亚!
index.js:1 警告:出于性能原因,此合成事件被重用。如果您看到此内容,则表示您正在访问已
key
发布/无效合成事件的方法。这是一个无操作功能。如果您必须保留原始合成事件,请使用 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} />
</div>
);
}
const columns = [
{ field: 'firstName', headerName: 'First name', width: 130, editable: true },
{ field: 'lastName', headerName: 'Last name', width: 130, editable: true },
{
field: 'fullName',
headerName: 'Full name',
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' },
];