单击行，获取该特定行的数据
单击行，获取该特定行的数据
提问于 2019-08-29 20:27:06
我将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}
/>
</>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-29 20:36:40
使用以下代码获取单击行的信息：
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
Stack Overflow用户
发布于 2019-08-29 20:37:31
您的代码中有相当多的错误，但要传回值，您必须将其放入回调中：
onRowClick = (state: any, rowInfo: any, column: any, instance: any) => {
this.props.rowClicked(rowInfo);
};像这样读出来：
onClickRow = (rowInfo) => {
console.log(rowInfo);
};希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57710199
复制相关文章
相似问题
腾讯云开发者
