Javascript 单击某一行即可获取该特定行的数据

我使用react表用于数据网格目的。我将react表提取为一个单独的组件，在这里我只需向它传递必要的道具，它就会呈现网格

每当我单击某一行时，我都会尝试获取与该行相关的信息。我正在尝试跳伞，但似乎不想工作

沙箱：

应用程序组件

import*as React from“React”；
从“react dom”导入{render}；
从“/DataGrid”导入DataGrid；
接口IProps{}
界面状态{
数据：{}[]；
列：{}[]；
}
类应用程序扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
数据：[]，
列：[]
};
}
componentDidMount（）{
这是getData（）；
}
getData=（）=>{
让数据=[
{名字：“杰克”，状态：“已提交”，年龄：“14”}，
{名字：“西蒙”，状态：“待定”，年龄：“15”}，
{名字：“皮特”，状态：“批准”，年龄：“17”}
];
this.setState（{data}，（）=>this.getColumns（））；
};
getColumns=（）=>{
让列=[
{
标题：“名字”，
访问者：“名字”
},
{
标题：“状态”，
访问者：“状态”
},
{
标题：“年龄”，
访问者：“年龄”
}
];
this.setState（{columns}）；
};
onClickRow=（）=>{
控制台日志（“测试”）；
};
render（）{
返回(
);
}
}
render（，document.getElementById（“根”））；

数据网格组件

import*as React from“React”；
从“反应表”导入反应表；
导入“react table/react table.css”；
接口IProps{
资料：有；
列：任意；
rowcalicked（）：void；
}
界面IState{}
导出默认类DataGrid扩展React.Component{
onRowClick=（状态：any，行信息：any，列：any，实例：any）=>{
this.props.rowClicked（）；
};
render（）{
返回(
);
}
}

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

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

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

---

您可以检查此代码沙盒示例：

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

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

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

---

您可以检查此代码沙盒示例：

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

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

然后像这样读出来：

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

---

希望这有帮助。

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

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

然后像这样读出来：

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

---

希望这有帮助。

谢谢你的回答。但我希望App component中包含行数据调用this.props.rowClicked时，将rowInfo作为参数发送：如果我理解正确，只需在调用this.props.rowClicked之前，检查它是否已定义。帮我解决这个问题？谢谢你的回答。但我希望App component中包含行数据调用this.props.rowClicked时，将rowInfo作为参数发送：如果我理解正确，只需在调用this.props.rowClicked之前，检查它是否已定义。帮我解决这个问题，我做了一些评论，帮我解释一下，我做了一些评论，让我用这个吗？