在材料表的自定义editComponent中设置值

import React from 'react';
import MaterialTable from 'material-table';

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
];

const columns = [
  { title: 'ID', field: 'id', editable: 'never' },
  { title: 'Name', field: 'name' },
  { title: 'Age', field: 'age', type: 'numeric' },
];

const EditableTable = () => {
  return (
    <MaterialTable
      title="Editable Table"
      data={data}
      columns={columns}
      editable={{
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const updatedData = [...data];
              const index = data.findIndex((item) => item.id === oldData.id);
              updatedData[index] = newData;
              // 更新数据
              setData(updatedData);
              resolve();
            }, 1000);
          }),
      }}
      options={{
        editRowModel: 'dialog',
      }}
      localization={{
        body: {
          editRow: {
            saveTooltip: 'Save',
            cancelTooltip: 'Cancel',
          },
        },
      }}
      components={{
        EditField: (props) => {
          const { columnDef, value, onChange } = props;
          // 设置初始值
          const initialValue = value || '';

          return (
            <input
              type="text"
              value={initialValue}
              onChange={(e) => onChange(e.target.value)}
            />
          );
        },
      }}
    />
  );
};

export default EditableTable;