通过高级搜索设置反应数据网格

Question

我已经对高级搜索的数据网格做出了反应。我需要编辑字段中的值。

我知道我需要添加

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

到我的index.js，但是我正在努力锻炼应该添加它的位置。我是相当新的js / react。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data, Filters } from "react-data-grid-addons";
import createRowData from "./createRowData";

import "./styles.css";

const defaultColumnProperties = {
  filterable: true,
  width: 160
};

const selectors = Data.Selectors;
const {
  NumericFilter,
  AutoCompleteFilter,
  MultiSelectFilter,
  SingleSelectFilter
} = Filters;
const columns = [
  {
    key: "id",
    name: "ID",
    editable: true,
    filterRenderer: NumericFilter
  },
  {
    key: "firstName",
    name: "First Name",
    editable: true,
    filterRenderer: AutoCompleteFilter
  },
  {
    key: "lastName",
    name: "Last Name",
    editable: true,
    filterRenderer: AutoCompleteFilter
  },
  {
    key: "jobTitle",
    name: "Job Title",
    editable: true,
    filterRenderer: MultiSelectFilter
  },
  {
    key: "jobArea",
    name: "Job Area",
    editable: true,
    filterRenderer: SingleSelectFilter
  },
  {
    key: "jobType",
    editable: true,
    name: "Job Type"
  },
  {
    key: "email",
    editable: true,
    name: "Email"
  },
  {
    key: "street",
    editable: true,
    name: "Street"
  },
  {
    key: "zipCode",
    editable: true,
    name: "ZipCode"
  },
  {
    key: "date",
    editable: true,
    name: "Date"
  },
  {
    key: "catchPhrase",
    editable: true,
    name: "Catch Phrase"
  }
].map(c => ({ ...c, ...defaultColumnProperties }));

//const ROW_COUNT = 50;

const handleFilterChange = filter => filters => {
  const newFilters = { ...filters };
  if (filter.filterTerm) {
    newFilters[filter.column.key] = filter;
  } else {
    delete newFilters[filter.column.key];
  }
  return newFilters;
};


function getValidFilterValues(rows, columnId) {
  return rows
    .map(r => r[columnId])
    .filter((item, i, a) => {
      return i === a.indexOf(item);
    });
}

function getRows(rows, filters) {
  return selectors.getRows({ rows, filters });
}

function Example({ rows }) {
  const [filters, setFilters] = useState({});
  const filteredRows = getRows(rows, filters);
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => filteredRows[i]}
      rowsCount={filteredRows.length}
      toolbar={<Toolbar enableFilter={true} />}
      onAddFilter={filter => setFilters(handleFilterChange(filter))}
      onClearFilters={() => setFilters({})}
      getValidFilterValues={columnKey => getValidFilterValues(rows, columnKey)}
      onGridRowsUpdated={this.onGridRowsUpdated}
      enableCellSelect={true}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example rows={createRowData(50)} />, rootElement);

./ src / index.js   第96行：“ onGridRowsUpdated”未定义no-undef

搜索关键字以详细了解每个错误。