使用Reactjs和Bootstraps一次显示一个折叠内容

时间：2019-01-28 15:08:56

标签： reactjs bootstrap-4

使用Reactjs和Bootstraps一次显示一个折叠内容。

下面的代码使用jquery和bootstrap4来显示和隐藏一次单击每个按钮时的折叠内容 并且工作正常。

<!doctype html>
<html>
    <head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {

  $('.collapse').on('show.bs.collapse', function () {

    // hide all accordion except the clicked one
    $('.collapse').not(this).collapse('hide');

  });

});

</script>



    </head>
    <body>


  <a href="#content1"  data-toggle="collapse">Content1..</a>
  <a href="#content2"  data-toggle="collapse">Content2</a>
  <a href="#content3"  data-toggle="collapse">Content3</a>
 <br>





 <div id="content1" class="collapse ">
<h1>Content 1 records</h1>

<a href="#content1" class="btn btn-default" data-toggle="collapse">Close </a>

  </div>


 <div id="content2" class="collapse ">
<h1>Content 2 records</h1>

<a href="#content2" class="btn btn-default" data-toggle="collapse">Close</a>

  </div>

 <div id="content3" class="collapse ">
<h1>Content 3 records</h1>

<a href="#content3" class="btn btn-default" data-toggle="collapse">Close</a>

  </div>



</body></html>

现在我必须在reactjs中获得其等效项。 我已经安装了Bootstrap并且Reactjs代码每次都显示折叠内容 该按钮是单击。

这是我的Reactjs问题。我希望它像上面的jquery代码一样仅显示为一个折叠内容。 请如何将这个jquery代码转换为reactjs等效项，或者还有其他选择

$( document ).ready(function() {

  $('.collapse').on('show.bs.collapse', function () {

    // hide all accordion except the clicked one
    $('.collapse').not(this).collapse('hide');

  });

});

这是Reactjs代码 

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import $ from 'jquery';



class Collapse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }





    render() {

      return (
        <span>
          <label>
            <ul>



  <a href="#content1"  data-toggle="collapse">Content1..</a>
  <a href="#content2"  data-toggle="collapse">Content2</a>
  <a href="#content3"  data-toggle="collapse">Content3</a>
 <br />


 <div id="content1" class="collapse ">
<h1>Content 1 records</h1>

<a href="#content1" class="btn btn-default" data-toggle="collapse">Close </a>

  </div>


 <div id="content2" class="collapse ">
<h1>Content 2 records</h1>

<a href="#content2" class="btn btn-default" data-toggle="collapse">Close</a>

  </div>

 <div id="content3" class="collapse ">
<h1>Content 3 records</h1>

<a href="#content3" class="btn btn-default" data-toggle="collapse">Close</a>

  </div>



          </ul>
        </label>
      </span>
    );
  }
}

1 个答案:

答案 0 :(得分：0)

下面是一个示例代码，显示了如何执行此操作：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.toggleAccordion = this.toggleAccordion.bind(this);
    this.state = {
      accordion: [true, false, false],
    };
}

  toggleAccordion(tab) {

    const prevState = this.state.accordion;
    const state = prevState.map((x, index) => tab === index ? !x : false);

    this.setState({
      accordion: state,
    });
  }

  render() {
    return (
      <div className='wrapper'>
                <div id="accordion">
                  <Reactstrap.Card className="mb-0">
                    <Reactstrap.CardHeader id="headingOne">
                      <Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
                        <h5 className="m-0 p-0">Collapsible Group Item #1</h5>
                      </Reactstrap.Button>
                    </Reactstrap.CardHeader>
                    <Reactstrap.Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
                      <Reactstrap.CardBody>
                        1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </Reactstrap.CardBody>
                    </Reactstrap.Collapse>
                  </Reactstrap.Card>
                  <Reactstrap.Card className="mb-0">
                    <Reactstrap.CardHeader id="headingTwo">
                      <Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
                        <h5 className="m-0 p-0">Collapsible Group Item #2</h5>
                      </Reactstrap.Button>
                    </Reactstrap.CardHeader>
                    <Reactstrap.Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
                      <Reactstrap.CardBody>
                        2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </Reactstrap.CardBody>
                    </Reactstrap.Collapse>
                  </Reactstrap.Card>
                  <Reactstrap.Card className="mb-0">
                    <Reactstrap.CardHeader id="headingThree">
                      <Reactstrap.Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
                        <h5 className="m-0 p-0">Collapsible Group Item #3</h5>
                      </Reactstrap.Button>
                    </Reactstrap.CardHeader>
                    <Reactstrap.Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
                      <Reactstrap.CardBody>
                        3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </Reactstrap.CardBody>
                    </Reactstrap.Collapse>
                  </Reactstrap.Card>
                </div>        
      </div>
    );
  }

}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);
.wrapper {
  margin: 50px;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />

相关问题
最新问题