在极端电网中提升状态

Question

在Simple Panels组件中，我有2个表组件 - 来自Dev Expreme的React Grid。这个想法是点击第一个表中的行将为第二个表定义一些道具。我熟悉提升状态https://reactjs.org/docs/lifting-state-up.html 1的概念，并成功使用了几次。但是 - 我不知道如何在TableRow中的onClick方法中定义this.props - 我相信它应该在第47行附近 -  其中定义了const TableRow - 在下面的代码中 - 现在是alert函数。在这里（或某个地方 - 这基本上就是我所要求的）我应该能够定义this.props.function，我可以从父组件中调用它作为prop。

import React from "react";
import Paper from "material-ui/Paper";
import { PagingState, IntegratedPaging } from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow,
  PagingPanel,
  TableColumnResizing
} from "@devexpress/dx-react-grid-material-ui";


function createColumnLine(item) {
  return { name: item, title: item };
}

function createColumnWidthLine(item) {
  return { columnName: item, width: "auto" };
}

function generateColumns(data) {
  var cols = [];
  var firstDataItem = data[0];
  var keys = Object.keys(firstDataItem);

  for (var i = 0; i < keys.length; i++) {
    cols.push(createColumnLine(keys[i]));
  }
  return cols;
}

function generateColumnWidth(data) {
  var colsWidth = [];
  var firstDataItem = data[0];
  var keys = Object.keys(firstDataItem);

  for (var i = 0; i < keys.length; i++) {
    colsWidth.push(createColumnWidthLine(keys[i]));
  }
  return colsWidth;
}

const TableRow = ({ row, ...restProps }) => (
  <Table.Row
    {...restProps}
    // eslint-disable-next-line no-alert
    onClick={() => alert(JSON.stringify(row))}
  />
);

class RgTable extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      rows: [],
      columnWidths: [],
      selectedRow: []
    };

    this.changeColumnWidths = columnWidths => {
      this.setState({ columnWidths });
    };
  }

  commitChanges({ added, changed, deleted }) {
    let { rows } = this.state;
    //console.log(rows);
    if (added) {
      console.log(added);
      const startingAddedId =
        rows.length - 1 > 0 ? rows[rows.length - 1].id + 1 : 0;
      rows = [
        ...rows,
        ...added.map((row, index) => ({
          id: startingAddedId + index,
          ...row
        }))
      ];
    }
    if (changed) {
      rows = rows.map(
        row => (changed[row.id] ? { ...row, ...changed[row.id] } : row)
      );
    }
    if (deleted) {
      const deletedSet = new Set(deleted);
      rows = rows.filter(row => !deletedSet.has(row.id));
      console.log("deleted", deleted);
    }
    this.setState({ rows });
  }

  setStateAsync(state) {
    return new Promise(resolve => {
      this.setState(state, resolve);
    });
  }

  //function that checks if the props have changed
  async componentWillReceiveProps(nextProps) {
    if (this.props.data1r !== nextProps.data1r) {
      var data = nextProps.data1r;
      //if "data" exists and is > 0 -> make new state
      if (data.length > 0) {
        try {
          await this.setStateAsync({
            columnWidths: generateColumnWidth(data)
          });
          await this.setStateAsync({ columns: generateColumns(data) });
          await this.setStateAsync({ rows: data });

          console.log("data in the componentWillReceiveProps in RgTable", data);
        } catch (e) {
          throw new Error(
            "Problems in setting up data inRgTable1 - async componentWillReceiveProps"
          );
        }
      } else {
        await this.setStateAsync({ columnWidths: [] });
        await this.setStateAsync({ rows: [] });
        await this.setStateAsync({ columns: [] });
      }
    }
  }

  render() {
    const { rows, columns, columnWidths } = this.state;
    console.log(this.state);

    return (
      <div>
        <Paper>
          <Grid rows={rows} columns={columns}>
            <PagingState defaultCurrentPage={0} pageSize={5} />
            <IntegratedPaging />
            <Table rowComponent={TableRow} />
            <TableColumnResizing
              columnWidths={columnWidths}
              onColumnWidthsChange={this.changeColumnWidths}
            />
            <TableHeaderRow />
            <PagingPanel />
          </Grid>
        </Paper>
      </div>
    );
  }
}

export default RgTable;