如何设置崩溃时的ID反应?

时间:2019-04-10 03:46:31

标签: node.js reactjs collapse

这是我的代码,当我们单击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个而不是全部折叠。

请帮我检查我在哪里弄错了。

提前谢谢!

0 个答案:

没有答案