reactjs - 反应材料ui的数据网格：可编辑列不起作用

Question

基于此文档https://material-ui.com/components/data-grid/editing/
我们需要做的就是使单元格可编辑是editable: true在列定义中设置属性，如下所示：

const columns: GridColumns = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  ...
]

但对我来说是行不通的！即使我正在做一个基本的实现Datagrid并且只是希望单元格是可编辑的，非常简单的单元格类型string所以基本上我应该在双击单元格时得到一个输入文本，但它不起作用。
为了使单元格可编辑，我应该注意什么？
这是我的代码：

import * as React from 'react';
import { DataGrid, GridColumns, GridRowsProp } from '@material-ui/data-grid';

export default function BasicEditingGrid() {
    return (
        <div style={{ height: 300, width: '100%' }}>
            <DataGrid rows={rows} columns={columns} />
        </div>
    );
}

const columns: GridColumns = [
    { field: 'name', headerName: 'Name', width: 180, editable: true },
    { field: 'age', headerName: 'Age', type: 'number', editable: true },
    {
        field: 'dateCreated',
        headerName: 'Date Created',
        type: 'date',
        width: 180,
        editable: true,
    },
    {
        field: 'lastLogin',
        headerName: 'Last Login',
        type: 'dateTime',
        width: 220,
        editable: true,
    },
];

const rows: GridRowsProp = [
    {
        id: 1,
        name: "Slimen",
        age: 25,
        dateCreated: new Date(),
        lastLogin: new Date(),
    },
    {
        id: 2,
        name: "Omar",
        age: 36,
        dateCreated: new Date(),
        lastLogin: new Date(),
    },
    {
        id: 3,
        name: "Arbi",
        age: 19,
        dateCreated: new Date(),
        lastLogin: new Date(),
    },
];

我只是在App组件中这样调用它：

import React from 'react';
import './App.css';
import BasicEditingGrid from "./components/test-editing";

function App() {
  return (
    <BasicEditingGrid/>
  );
}

export default App;

标签： reactjsdatagridmaterial-ui