Блог

Я использую сетку данных Adazzle React для отображения данных пользователей, которые я успешно получаю от своей службы REST, но я не могу редактировать и изменять значения каких-либо ячеек, несмотря на то, что задано свойство редактируемое : 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').defau<
       

    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>
);


}
 

Из документов:

Для того чтобы ячейки столбца были доступны для редактирования, вам необходимо выполнить следующие действия:

1. Установите для редактируемого свойства столбца значение true.
2. Предоставьте функцию обработчика onGridRowsUpdated. Приведенный ниже фрагмент является примером обработчика, который обрабатывает все вышеперечисленные сценарии обновления.

 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 };
    });
  };