0

这是我从材料 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' },
];
4

0 回答 0