如何解决如何使用React从表中获取行数据？
我有一个显示一些数据的表。其列之一包含一些操作图标，可通过onClick从特定行中获取高级信息。我需要从行中获取数据并将其呈现在另一个组件中。我该如何实施？
下面是代码：
const MainContent = () => {
....
....
....
const routeContents = (route,index) => {
return (
<tr key={index}>
<td>{route.appName}</td>
<td>{route.parent}</td>
<td>{route.createdTs}</td>
<td></td>
<td>{route.respCode}</td>
<td>{route.respContentType}</td>
<td>{route.respDelay}</td>
<td>
<Icon
link
name="eye"
onClick={() => handleClickView("0","PARENT")}
/>
<Icon
link
name="edit"
onClick={() => handleClickView("0","PARENT")}
/>
<Icon link name="delete" />
</td>
</tr>
);
};
// iterating through sub-arrays
const contents = (item,index) => {
return item.routeChildEntry ? (
<>
<tr key={index}>
<td>{item.appName}</td>
<td></td>
<td>{item.createdTs}</td>
<td>{item.pattern}</td>
<td></td>
<td></td>
<td></td>
<td>
<Icon
link
name="eye"
onClick={() => handleClickView("0","USECASE")}
/>
<Icon
link
name="edit"
onClick={() => handleClickView("0","USECASE")}
/>
<Icon link name="delete" />
</td>
</tr>
{item.routeChildEntry.map(routeContents)}
</>
) : (
<tr key={index}>
<td>{item.appName}</td>
<td></td>
<td>{item.createdTs}</td>
<td>{item.pattern}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
);
};
return (
<div>
....
....
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header card-header-info">
<h4 className="card-title ">MOCK</h4>
</div>
<div className="card-body">
<form>
{loading ? (
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>AppName</th>
<th>Parent_App</th>
<th>Created_Date</th>
<th>Req_Path</th>
<th>Resp_Code</th>
<th>Resp_Content_Type</th>
<th>Resp_Delay</th>
<th>Action</th> {/* row that contains the icons*/}
</tr>
</thead>
<tbody>
{data.map((routes,index) => {
return routes.map(contents,index);
})}
</tbody>
</table>
</div>
) : (
....
....
....
)}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default MainContent;
有人可以为我提供任何参考或解决方法来实现这一目标吗？
解决方法
您可以将route和contents的索引传递给onclick函数，对吗？像这样：
const contents = (item,contentsIndex,routeIndex) => {
...
<Icon
link
name="eye"
onClick={() => handleClickView("0","USECASE",routeIndex)}
/>
}
然后可以将其用于获取正确的数据：
const handleClickView = (a,b,routeIndex) => {
const data = data[routeIndex][contentsIndex];
}
正如Tushar Kale所建议的那样，我在图标的onClick中传递了route和item。
以下是对我有用的代码，
const MainContent = () => {
....
....
....
const routeContents = (route,index) => {
return (
<tr key={index}>
<td>{route.appName}</td>
<td>{route.parent}</td>
<td>{route.createdTs}</td>
<td></td>
<td>{route.respCode}</td>
<td>{route.respContentType}</td>
<td>{route.respDelay}</td>
<td>
<Icon
link
name="eye"
onClick={() => handleClickView("0","PARENT",route)}
/>
<Icon
link
name="edit"
onClick={() => handleClickView("0",route)}
/>
<Icon link name="delete" />
</td>
</tr>
);
};
// iterating through sub-arrays
const contents = (item,index) => {
return item.routeChildEntry ? (
<>
<tr key={index}>
<td>{item.appName}</td>
<td></td>
<td>{item.createdTs}</td>
<td>{item.pattern}</td>
<td></td>
<td></td>
<td></td>
<td>
<Icon
link
name="eye"
onClick={() => handleClickView("0",item)}
/>
<Icon
link
name="edit"
onClick={() => handleClickView("0",item)}
/>
<Icon link name="delete" />
</td>
</tr>
{item.routeChildEntry.map(routeContents)}
</>
) : (
<tr key={index}>
<td>{item.appName}</td>
<td></td>
<td>{item.createdTs}</td>
<td>{item.pattern}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
);
};
return (
<div>
....
....
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header card-header-info">
<h4 className="card-title ">MOCK</h4>
</div>
<div className="card-body">
<form>
{loading ? (
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>AppName</th>
<th>Parent_App</th>
<th>Created_Date</th>
<th>Req_Path</th>
<th>Resp_Code</th>
<th>Resp_Content_Type</th>
<th>Resp_Delay</th>
<th>Action</th> {/* row that contains the icons*/}
</tr>
</thead>
<tbody>
{data.map((routes,index) => {
return routes.map(contents,index);
})}
</tbody>
</table>
</div>
) : (
....
....
....
)}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default MainContent;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。