REACTJS 如何在单击卡片时仅折叠一张卡片（面板）

Question

所以我最近尝试了这个名为 CoreUI Dashboard Template for ReactJS, and I am now tinkering around with the components as I wanted to learn on how to use it. I experimented and then googled on how to do it and I found this "”的模板。但它没有用。相反，它创建了如下所示的错误

https://imgur.com/0rbEuCY

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
▶ 4 stack frames were collapsed.
Collapses.toggle
F:/mgg/coreui-free-react-admin-template-master/src/views/Base/Collapses/Collapses.js:43
  40 | }
  41 | 
  42 | toggle(panel) {
> 43 |   this.setState({ 
     | ^  44 |     collapse: {
  45 |       ...this.state.collapse,
  46 |       [panel]: !this.state.collapse[panel]
View compiled
Collapses.render
F:/mgg/coreui-free-react-admin-template-master/src/views/Base/Collapses/Collapses.js:111
  108 |   </CardBody>
  109 | </Collapse>
  110 | <CardFooter>
> 111 |   <Button color="primary" onClick={this.toggle(1)} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
      | ^  112 |   <hr/>
  113 |   <h5>Current state: {this.state.status}</h5>
  114 | </CardFooter>
View compiled
▶ 12 stack frames were collapsed.

欢迎任何类型的建议

import React, { Component } from 'react';
import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';

class Collapses extends Component {

  constructor(props) {
    super(props);
    this.onEntering = this.onEntering.bind(this);
    this.onEntered = this.onEntered.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
    this.toggle = this.toggle.bind(this);
    this.toggleAccordion = this.toggleAccordion.bind(this);
    this.toggleCustom = this.toggleCustom.bind(this);
    this.toggleFade = this.toggleFade.bind(this);
    this.state = {
      collapse: {},
      accordion: [true, false, false],
      custom: [true, false],
      status: 'Closed',
      fadeIn: true,
      timeout: 300,
    };
  }

  onEntering() {
    this.setState({ status: 'Opening...' });
  }

  onEntered() {
    this.setState({ status: 'Opened' });
  }

  onExiting() {
    this.setState({ status: 'Closing...' });
  }

  onExited() {
    this.setState({ status: 'Closed' });
  }

  toggle(panel) {
    this.setState({ 
      collapse: {
        ...this.state.collapse,
        [panel]: !this.state.collapse[panel]
      }
    });
  }

  toggleAccordion(tab) {

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

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

  toggleCustom(tab) {

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

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

  toggleFade() {
    this.setState({ fadeIn: !this.state.fadeIn });
  }

  render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Collapse</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
                <CardBody>
                  <p>
                    This is first paragraph inside the card
                  </p>
                  <p>
                    2nd paragraph of the card
                  </p>
                </CardBody>
              </Collapse>
              <CardFooter>
                <Button color="primary" onClick={this.toggle(1)} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
                <hr/>
                <h5>Current state: {this.state.status}</h5>
              </CardFooter>
            </Card>
          </Col>
          </Row><Row>
          <Col xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Collapse</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
                <CardBody>
                  <p>
                    This is first paragraph inside the card
                  </p>
                  <p>
                    2nd paragraph of the card
                  </p>
                </CardBody>
              </Collapse>
              <CardFooter>
                <Button color="primary" onClick={this.toggle(2)} className={'mb-2'} id="toggleCollapse2">Toggle</Button>
                <hr/>
                <h5>Current state: {this.state.status}</h5>
              </CardFooter>
            </Card>
          </Col>
          </Row>
      </div>
    );
  }
}

export default Collapses;

Answer 1

伙计们，我已经找到了解决方案。感谢所有的建议。显然我错过了编码的一些重要部分。我修好了它，它工作得很好。再次感谢。

让我分享下面的工作代码。

import React, { Component } from 'react';
import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';

class Collapses extends Component {

  constructor(props) {
    super(props);
    this.onEntering = this.onEntering.bind(this);
    this.onEntered = this.onEntered.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
    this.toggle = this.toggle.bind(this);
    this.toggleAccordion = this.toggleAccordion.bind(this);
    this.toggleCustom = this.toggleCustom.bind(this);
    this.toggleFade = this.toggleFade.bind(this);
    this.state = {
      collapse: {},
      accordion: [true, false, false],
      custom: [true, false],
      status: 'Closed',
      fadeIn: true,
      timeout: 300,
    };
  }

  onEntering() {
    this.setState({ status: 'Opening...' });
  }

  onEntered() {
    this.setState({ status: 'Opened' });
  }

  onExiting() {
    this.setState({ status: 'Closing...' });
  }

  onExited() {
    this.setState({ status: 'Closed' });
  }

  toggle(panel) {
    this.setState({ 
      collapse: {
        ...this.state.collapse,
        [panel]: !this.state.collapse[panel]
      }
    });
  }

  toggleAccordion(tab) {

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

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

  toggleCustom(tab) {

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

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

  toggleFade() {
    this.setState({ fadeIn: !this.state.fadeIn });
  }

  render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Collapse</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <Collapse isOpen={this.state.collapse[1]} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
                <CardBody>
                  <p>
                    Paragraph 1
                  </p>
                  <p>
                    Paragraph 2
                  </p>
                </CardBody>
              </Collapse>
              <CardFooter>
                <Button color="primary" onClick={()=>this.toggle(1)} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
                <hr/>
                <h5>Current state: {this.state.status}</h5>
              </CardFooter>
            </Card>
          </Col>
          </Row><Row>
          <Col xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Collapse</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <Collapse isOpen={this.state.collapse[2]} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
                <CardBody>
                  <p>
                    Paragraph 1
                  </p>
                  <p>
                    Paragraph 2
                  </p>
                </CardBody>
              </Collapse>
              <CardFooter>
                <Button color="primary" onClick={()=>this.toggle(2)} className={'mb-2'} id="toggleCollapse2">Toggle</Button>
                <hr/>
                <h5>Current state: {this.state.status}</h5>
              </CardFooter>
            </Card>
          </Col>
          </Row>
      </div>
    );
  }
}

export default Collapses;

REACTJS 如何在单击卡片时仅折叠一张卡片（面板）

REACTJS How to Collapse only one card(panel) when I click the card

javascript

reactjs

core-ui