单击一行获取该特定行的数据

Question

我将 react-table 用于数据网格目的。我已经将 react-table 提取为一个单独的组件，我只是将必要的道具传递给它并呈现网格。

我试图在每次单击时获取与特定行相关的信息。我正在尝试 getTrProps 但似乎不起作用。

沙盒：https://codesandbox.io/s/react-table-row-table-g3kd5

应用组件

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

interface IProps {}
interface IState {
  data: {}[];
  columns: {}[];
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      columns: []
    };
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted", age: "14" },
      { firstName: "Simon", status: "Pending", age: "15" },
      { firstName: "Pete", status: "Approved", age: "17" }
    ];
    this.setState({ data }, () => this.getColumns());
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ];
    this.setState({ columns });
  };

  onClickRow = () => {
    console.log("test");
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
      </>
    );
  }
}
render(<App />, document.getElementById("root"));

DataGrid 组件

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

interface IProps {
  data: any;
  columns: any;
  rowClicked(): void;
}

interface IState {}

export default class DataGrid extends React.Component<IProps, IState> {
  onRowClick = (state: any, rowInfo: any, column: any, instance: any) => {
    this.props.rowClicked();
  };

  render() {
    return (
      <>
        <ReactTable
          data={this.props.data}
          columns={this.props.columns}
          getTdProps={this.onRowClick}
        />
      </>
    );
  }
}

Answer 1

使用此代码获取点击行的信息：

 getTdProps={(state, rowInfo, column, instance) => {
            return {
              onClick: (e, handleOriginal) => {
                console.log("row info:", rowInfo);

                if (handleOriginal) {
                  handleOriginal();
                }
              } 
          }}}

您可以查看此 CodeSandbox 示例：https://codesandbox.io/s/react-table-row-table-shehb?fontsize=14

Answer 2

您的代码中有很多错误，但要将值传回，您必须将其放入回调中：

onRowClick = (state: any, rowInfo: any, column: any, instance: any) => {
    this.props.rowClicked(rowInfo);
};

然后像这样读出来：

onClickRow = (rowInfo) => {
    console.log(rowInfo);
 };

希望对您有所帮助。

单击一行获取该特定行的数据

On click of a row get the data of that particular row

javascript

setstate

reactjs

react-table

应用组件

DataGrid 组件