React Data Grid - 能够查看但不能编辑单元格答案

【问题标题】：React Data Grid - Able To View But Not Able To Edit CellsReact Data Grid - 能够查看但不能编辑单元格
【发布时间】：2021-03-13 05:49:23
【问题描述】：

我正在使用 Adazzle 的 React Data Grid 来显示我从我的 REST 服务中成功获取的用户数据，但是我无法编辑和更改任何单元格的值，尽管设置了属性 editable : true。如何为我的 React 数据网格启用编辑单元格？

这是我的 index.js：

import React, {useState, useEffect} from "react";
import ReactDataGrid from 'react-data-grid';
import ReactDOM from 'react-dom';


export default function App() {
  const [isLoaded,setIsLoaded] = useState(false);
  const [rowData,setRowData] = useState([]);


  
  useEffect(() => {
    const axios = require('axios').default;
       

    axios
      .get('http://localhost:3000/users')

      .then((response) => {

          setIsLoaded(true);
          console.log(response.data);
          setRowData(response.data);
          response.data.forEach(user => {

        });
            

      });


  }, []);


  const columns = [
    { key: "_id", name: "_id", width: 250 },
    { key: "id", name: "ID", width: 100 },
    { key: "userName", name: "User Name", width: 250, editable: true },
    { key: "userTelNo", name: "Tel No", width: 250, editable: true },
    { key: "userEmail", name: "EMail", width: 250, editable: true },
    { key: "userRole", name: "Role", width: 150, editable: true },
    { key: "dateSaved", name: "Date Saved", width: 250 },
];


return( 
  <div style={{ height: 700, width: '100%' }}>
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ flexGrow: 1 }}>

            <ReactDataGrid 
              columns={columns}
              rows={rowData}
              getRowId ={(row) => row._id}
              id="_id"
            />

          </div>
      </div>
    </div>
);


}

【问题讨论】：

标签： javascript reactjs react-data-grid

【解决方案1】：

来自docs：

为了使列的单元格可编辑，您需要执行以下：

将列的可编辑属性设置为真。

提供一个 onGridRowsUpdated 处理函数。下面的 sn-p 是一个例子处理上述所有更新场景的处理程序。

onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };

【讨论】：