REACTJS Как свернуть только одну карту (панель) при нажатии на карту - PullRequest
Новая
       103

REACTJS Как свернуть только одну карту (панель) при нажатии на карту

1 голос
/ 16 марта 2020

Итак, я недавно попробовал этот шаблон под названием CoreUI Dashboard Template для ReactJS, и сейчас я возился с компонентами, так как хотел узнать, как его использовать. Я экспериментировал, а затем погуглил, как это сделать, и обнаружил, что " реакция разворачивается и разваливается только на одну панель ". Но это не сработало. Вместо этого он создал ошибку, как показано ниже

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;

1 Ответ

2 голосов
/ 16 марта 2020

Я уже нашел решение, ребята. спасибо за все советы. Видимо, я пропустил некоторые важные части кодирования. Я все исправил, и он работает просто отлично. Еще раз спасибо.

Позвольте мне поделиться рабочим кодом ниже. 

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;
...