这是我的代码,当我们单击1而不是1时,它会显示所有内容。
import React from 'react';
import { Table , Collapse , Card, CardBody } from 'reactstrap';
class multipleCollapse extends React.Component
{
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = { collapse: true };
}
toggle() {
this.setState(state => ({ collapse: !state.collapse }));
}
render()
{
return(
<div className="container">
<div className="py-5 text-center">
<div className="jumbotron">
<div className="container">
<h3>Collapse Big Title</h3>
<hr/>
<div>
<Table hover bordered>
{/* */}
<thead>
<tr onClick={this.toggle} id="01" >
<th>Collapse 1 little Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Collapse isOpen={this.state.collapse} toggler="#01">
<Card>
<CardBody>
<Table>
<thead>
<tr>
<th>collapse 1 children 01</th>
<th>collapse 1 children 01 value</th>
</tr>
</thead>
<tbody>
<tr>
<th>collapse 1 children 02</th>
<th>collapse 1 children 02 value</th>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Collapse >
</td>
</tr>
</tbody>
{/* */}
{/* */}
<thead>
<tr onClick={this.toggle} id="02" >
<th>Collapse 2 little Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Collapse isOpen={this.state.collapse} toggler="#02">
<Card>
<CardBody>
<Table>
<thead>
<tr>
<th>collapse 2 children 01</th>
<th>collapse 2 children 01 value</th>
</tr>
</thead>
<tbody>
<tr>
<th>collapse 2 children 02</th>
<th>collapse 2 children 02 value</th>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Collapse >
</td>
</tr>
</tbody>
{/* */}
</Table>
</div>
</div>
</div>
</div>
</div>
);
}
}export default multipleCollapse;
//
代码由2个折叠ID组成,该ID将首先自动显示两个折叠内容,并且当用户单击其中一个ID时,它应折叠1个而不是全部折叠。
请帮我检查我在哪里弄错了。
提前谢谢!