React 数据网格：自定义下拉编辑器：值未更新。网格未启用编辑答案

【问题标题】：React Data Grid: Custom DropDown Editor: value is not getting updated. Grid is not getting enabled for editingReact 数据网格：自定义下拉编辑器：值未更新。网格未启用编辑
【发布时间】：2021-08-01 13:15:01
【问题描述】：

在 react-data-grid 7.0.0-beta 上

我阅读了 git repo 中为 react-data-grid 提供的最新演示，并为我的用例实现了自定义下拉菜单。

下拉菜单似乎可以工作，但它不会在选择时更新网格数据。 editable 属性似乎也不起作用。

测试代码在这里实现：沙盒：https://codesandbox.io/s/react-data-grid-custom-dropdown-editor-kcy5n

export const EntryCriteriaGrid = () => {
  const columns = [
    {
      key: "r1",
      name: "Criteria",
      width: "50%",
      resizable: true,
      editable: true
    },
    {
      key: "status",
      name: "Status",
      editor: DropdownCustomEditor,
      editorOptions: {
        editOnClick: true
      },
      editable: true
    },
    { key: "tracker", name: "Tracker", editable: true }
  ];

  const rows = [
    { r1: "data 1", status: "BLOCKED", tracker: "tracker 1" },
    { r1: "data 2", status: "PASS", tracker: "tracker 1" },
    { r1: "data 3", status: "ISSUE", tracker: "tracker 2" }
  ];

  const [state, setState] = useState({ rows });

  const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    setState((state) => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  return (
    <div>
      <ReactDataGrid
        columns={columns}
        rows={state.rows}
        rowsCount={3}
        onGridRowsUpdated={onGridRowsUpdated}
        enableCellSelect={true}
        className="rdg-light"
      />
    </div>
  );
};
export default EntryCriteriaGrid;


import React, { Component } from "react";
import ReactDOM from "react-dom";
export default class DropdownCustomEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: ""
    };
    this.options = [
      { id: "blocked", value: "BLOCKED" },
      { id: "pass", value: "PASS" },
      { id: "issue", value: "ISSUE" },
      { id: "notStarted", value: "NOT STARTED" }
    ];
  }
  componentDidMount() {
    if (this.props.row && this.props.row.status)
      this.setState({ selected: this.props.row.status });
  }
  getValue = function () {
    return { status: this.state.selected };
  };
  getInputNode() {
    return ReactDOM.findDOMNode(this).getElementsByTagName("select")[0];
  }
  update(e) {
    this.setState({ selected: e.target.value });
    this.props.onRowChange({ ...this.props.row, status: e.target.value }, true);
  }
  render() {
    return (
      <select
        className="rdg-select-editor"
        onChange={(e) => this.update(e)}
        autoFocus
        value={this.state.selected}
      >
        {this.options.map((elem) => {
          return (
            <option key={elem.id} value={elem.value}>
              {elem.value}
            </option>
          );
        })}
      </select>
    );
  }
}

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

只需按如下方式更改您的代码：

在DropdownCustomEditor 组件中：

update(e) {
    this.setState({ selected: e.target.value });
    this.props.onRowChange({ ...this.props.row, status: e.target.value });
  }

在EntryCriteriaGrid 组件中

const onGridRowsUpdated = (rows) => {
    setState({ rows });
  };

和

<ReactDataGrid
        columns={columns}
        rows={state.rows}
        rowsCount={3}
        //onRowsUpdate={onGridRowsUpdated}
        enableCellSelect={true}
        className="rdg-light"
        onRowsChange={(rows) => onGridRowsUpdated(rows)}
      />

【讨论】：