reactjs - 双击行时自定义行渲染

Question

我的每一行都有与之相关的详细视图。当用户双击行时，我想在详细信息视图和行视图之间切换。对我的限制是我不确定应该在哪里定义标志。根据我的要求，标志应该与每一行相关联。

我已经完成了几乎所有的事情，除了那个标志的事情。代码示例

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid, { Row } from "react-data-grid";
import "./styles.css";

const columns = [
  { key: "id", name: "ID", editable: true },
  { key: "title", name: "Title", editable: true },
  { key: "complete", name: "Complete", editable: true }
];

const rows = [
  { id: 0, title: "Task 1", complete: 20 },
  { id: 1, title: "Task 2", complete: 40 },
  { id: 2, title: "Task 3", complete: 60 }
];

class Example extends React.Component {
  state = { rows };

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

  rowRenderer = props => {
    const { row } = props;
    if (row.expand) {
      return <div>my Custom view {row.title}</div>;
    } else {
      return <Row {...props} />;
    }
  };

  switchDetailedView = rowNumber => {
    console.log("rowNumber", rowNumber);
  };
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={3}
        onGridRowsUpdated={this.onGridRowsUpdated}
        rowRenderer={this.rowRenderer}
        enableCellAutoFocus={false}
        onRowDoubleClick={this.switchDetailedView}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

标签： reactjsreact-data-grid