[英]How can I display a clickable table from a nested array of objects?
I have an array of objects that contain some variable information, but also another array of objects with some more information.我有一个包含一些变量信息的对象数组,还有另一个包含更多信息的对象数组。 I'm trying to display a table that shows the initial array, and when the user clicks on the row of that particular object, it would render a new table with the objects inside that specific array selected.
我正在尝试显示一个显示初始数组的表格,当用户单击该特定对象的行时,它将呈现一个新表格,其中选择了该特定数组内的对象。
startCreateEventHandler = () => {
this.setState({ creating: true });
};
modalCancelHandler = () => {
this.setState({ creating: false });
};
render() {
return (
<div>
{this.state.creating && (
<Table>
<thead>
<tr>
<th>Details</th>
</tr>
</thead>
<tbody>
{this.props.archives.map(archive =>
archive.ticketRequests.map(request => (
<tr>
<td>{request.details}</td>
</tr>
))
)}
</tbody>
</Table>
)}
{this.state.creating ? null : (
<Table hover className="table table-striped">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
{this.props.archives.map(archive => (
<tr onClick={this.startCreateEventHandler}>
<td>{archive.title}</td>
</tr>
))}
</tbody>
</Table>
)}
</div>
);
}
What I get with this is the table set up correctly, but once I click on a row it displays all* rows objects in the next table instead of just that specific archive.我得到的是表格设置正确,但是一旦我单击一行,它就会在下一个表格中显示所有*行对象,而不仅仅是那个特定的存档。
If I understood your problem then You also need to set the current clicked archive on the state and need to parse that selected archive如果我理解你的问题,那么你还需要在状态上设置当前点击的存档,并需要解析所选的存档
startCreateEventHandler = (archive) => {
this.setState({ creating: true, selectedArchive: archive });
};
modalCancelHandler = () => {
this.setState({ creating: false, selectedArchive: undefined });
};
render() {
return (
<div>
{this.state.creating && (
<Table>
<thead>
<tr>
<th>Details</th>
</tr>
</thead>
<tbody>
{this.state.selectedArchive.map(archive =>
<tr>
<td>{archive.details}</td>
</tr>
)}
</tbody>
</Table>
)}
{this.state.creating ? null : (
<Table hover className="table table-striped">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
{this.props.archives.map(archive => (
<tr onClick={(event)=>this.startCreateEventHandler(archive.ticketRequests)}>
<td>{archive.title}</td>
</tr>
))}
</tbody>
</Table>
)}
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.