【发布时间】：2019-10-27 20:23:09
【问题描述】：
我正在尝试使用 Bootstrap 4 和 React JS 在表格的整个宽度的表格行中创建一个下拉/折叠区域。我无法找到我想要的视觉效果，我只记得以前在某个地方使用过它（可能在 AWS 上？），但我无法再次找到它。
编辑：已找到所需的操作 (https://i.imgur.com/Pcg1JgI.png)。单击 V 形后，将打开下面的行。
这是我当前的代码：
import React from "react";
import { API, graphqlOperation } from 'aws-amplify';
import { listTrackerItems } from '../graphql/queries';
class TrackerGeneralPage extends React.Component {
state = {
id: '',
active: [],
completed: [],
completedDateNow: '',
newStatus: 'Complete'
};
async componentDidMount() {
const result = await API.graphql(graphqlOperation(listTrackerItems))
let data = result.data.listTrackerItems.items
let General = data.filter(t=>t.department === 'General');
const activeGeneral = General.filter(t=>t.status === 'Active');
const completedGeneral = General.filter(t=>t.status === 'Completed');
const date = new Date();
const month = date.getUTCMonth() + 1;
const day = date.getUTCDate();
const year = date.getUTCFullYear();
const timeNow = month + "/" + day + "/" + year;
this.setState({active: activeGeneral, completed: completedGeneral, completedDateNow: timeNow });
}
render() {
const { active } = this.state
return (
<>
<div>
<div class="container">
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
<div className="mx-auto" align="center">
<h1>General</h1>
</div>
</div>
<div class="col-sm">
<div className="mx-auto mt-2" align="center">
{/* <!-- Button trigger modal --> */}
<a role="button" className="btn btn-dark" href="/tracker/nwa/lab/add" >
Add Tracker
</a>
</div>
</div>
</div>
</div>
{/* Active Trackers */}
<div id="toggle-active" className="">
<div className="my-4">
<table className="table table-hover table-bordered mb-3">
<thead className="thead-dark">
<tr>
<th scope="col">Actions</th>
<th scope="col">Name</th>
<th scope="col">Regulation</th>
{/* <th scope="col">Occurrence</th> */}
<th scope="col">Due On</th>
<th scope="col">Assigned</th>
<th scope="col">Status</th>
{/* <th scope="col">Completer</th>
<th scope="col">Date Completed</th>
<th scope="col">Description</th> */}
</tr>
</thead>
<tbody>
{active.map(item => (
<tr key={item.id}>
<th scope="row" className="dropdown">
<a class="btn" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><img src="https://icon.now.sh/chevronDown" width="25" height="25" className="d-inline-block align-top" alt="Open Row" /></a>
</th>
<td>{item.name}</td>
<td>{item.reg}</td>
<td>{item.dateDue}</td>
<td>{item.assigned}</td>
<td>{item.status}</td>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<td>{item.occurrence}</td>
<td>{item.completer}</td> */}
<td>{item.dateCompleted}</td>
<td>{item.description}</td>
</div>
</div>
</tr>
))}
</tbody>
</table>
</div> {/* End Table Section */}
</div> {/* End Active Toggle */}
</div> {/* End Container */}
</>
)
}
}
export default TrackerGeneralPage;
如果我当前单击下拉箭头，它会将其放在表格的右侧：visual on imgur。
如果我移动这个：
<div class="collapse" id="collapseExample">
<div class="card card-body">
<td>{item.occurrence}</td>
<td>{item.completer}</td> */}
<td>{item.dateCompleted}</td>
<td>{item.description}</td>
</div>
</div>
进入下拉/折叠按钮所在的<th>，它只将其全部放入该特定列：visual on imgur。
我希望按钮打开表格行正下方的下拉/折叠区域，就好像它已连接一样（将下方的行进一步向下推）并且是表格/行的全宽。
每个按钮也只需要打开特定的行下拉/折叠区域，现在如果我点击任何按钮，它会打开所有行的下拉/折叠区域。
这是如何完成的/这叫什么？
【问题讨论】：
标签： reactjs twitter-bootstrap bootstrap-4