ReactJS 手风琴 - 在应该一次打开一个时打开所有手风琴

Question

我做了一个手风琴，但国家一次打开一个，但我只想一次打开一个。我有状态工作，但它只是针对所有的手风琴而不是实际的手风琴。基本上，当用户单击手风琴时，它会下拉并显示内容，这是常见的内容，但它会显示所有手风琴打开，但一次应该只显示一个。

我哪里错了：

    import React, { Component } from 'react';
    import axios from 'axios';
    import Icon from '../Icon/Icon';

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      activeAcc: false
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle() {
    this.setState(prevState => {
      return {
        activeAcc: !prevState.activeAcc
      };
    });
  }

  render() {
    const { disruptions, activeAcc } = this.state;

    return (
      <div>
        {disruptions.length > 0 ? (
          disruptions.map(post => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAcc ? 'wmnds-is--open' : ''}`}>
                  <button
                    type="button"
                    aria-controls="accordion-custom-01"
                    className="wmnds-accordion__summary-wrapper"
                    aria-expanded="true"
                    onClick={this.toggle}
                  >
                    <div className="wmnds-accordion__summary">
                      <div className="wmnds-grid wmnds-grid--align-center">
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus" />
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>
                        <div className="wmnds-col-auto">
                          <strong>{post.title}</strong>
                        </div>
                      </div>
                    </div>

                    <svg className="wmnds-accordion__icon">
                      <Icon iconName="general-expand" iconClass="general-expand" />
                    </svg>

                    <svg className="wmnds-accordion__icon wmnds-accordion__icon--minimise">
                      <Icon iconName="general-minimise" iconClass="general-minimise" />
                    </svg>
                  </button>

                  <div className="wmnds-accordion__content" id="accordion-custom-01">
                    <h4 className="serviceAffected">Affected Service(s) </h4>
                    {post.servicesAffected.map(affected => (
                      <div key={affected.id}>
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus">
                              {affected.serviceNumber}
                            </Icon>
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>

                        <h5>routeDesc:</h5>
                        {affected.routeDesc}
                        <h5>serviceNumber:</h5>
                        {affected.serviceNumber}
                        <h5>direction</h5>
                        {affected.direction}
                      </div>
                    ))}

                    <p>{post.title}</p>
                    <p>{post.description}</p>
                    <p>{post.disruptionSeverity}</p>
                    <p>{post.mode}</p>
                    <p>{post.disruptionSeverity}</p>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div>
            <div className="wmnds-loader" />
          </div>
        )}
      </div>
    );
  }
}

export default RestInfo;

提前致谢！

Answer 1

问题是所有的手风琴都有相同的状态，这就是为什么所有手风琴都同时打开和关闭的原因。这里的想法是使用每个项目（手风琴）的标识符。我们知道循环中的所有项目都有一个以零开头的标识符。项目的打开将基于其标识符等于 activeAcc 和切换功能的事实将此标识符作为参数，以便能够为activeAcc分配相应项目的标识符。

import React, { Component } from 'react';
    import axios from 'axios';
    import Icon from '../Icon/Icon';

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      activeAcc: 0
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle(key) {
    this.setState(prevState => {
      return {
        activeAcc: prevState.activeAcc===key?false:key
      };
    });
  }

  render() {
    const { disruptions, activeAcc } = this.state;

    return (
      <div>
        {disruptions.length > 0 ? (
          disruptions.map((post,key) => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAcc===key ? 'wmnds-is--open' : ''}`}>
                  <button
                    type="button"
                    aria-controls="accordion-custom-01"
                    className="wmnds-accordion__summary-wrapper"
                    aria-expanded="true"
                    onClick={()=>this.toggle(key)}
                  >
                    <div className="wmnds-accordion__summary">
                      <div className="wmnds-grid wmnds-grid--align-center">
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus" />
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>
                        <div className="wmnds-col-auto">
                          <strong>{post.title}</strong>
                        </div>
                      </div>
                    </div>

                    <svg className="wmnds-accordion__icon">
                      <Icon iconName="general-expand" iconClass="general-expand" />
                    </svg>

                    <svg className="wmnds-accordion__icon wmnds-accordion__icon--minimise">
                      <Icon iconName="general-minimise" iconClass="general-minimise" />
                    </svg>
                  </button>

                  <div className="wmnds-accordion__content" id="accordion-custom-01">
                    <h4 className="serviceAffected">Affected Service(s) </h4>
                    {post.servicesAffected.map(affected => (
                      <div key={affected.id}>
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus">
                              {affected.serviceNumber}
                            </Icon>
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>

                        <h5>routeDesc:</h5>
                        {affected.routeDesc}
                        <h5>serviceNumber:</h5>
                        {affected.serviceNumber}
                        <h5>direction</h5>
                        {affected.direction}
                      </div>
                    ))}

                    <p>{post.title}</p>
                    <p>{post.description}</p>
                    <p>{post.disruptionSeverity}</p>
                    <p>{post.mode}</p>
                    <p>{post.disruptionSeverity}</p>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div>
            <div className="wmnds-loader" />
          </div>           )}
      </div>
    );
  }
}

export default RestInfo;

Answer 2

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      /** initially all toggles are in false state [false, false, ...] */
      activeAccordions: disruptions.map(i => false) /** [false, false, ..... till disruptions.length] */
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle(accordionIndex) {
    let activeAccordions = this.state.disruptions.map(i => false) /** close all open accordions */
    activeAccordions[accordionIndex] = !activeAccordions[accordionIndex] /** toggle the intended accordion */
    this.setState({ activeAccordions: activeAccordions });
  }

  render() {
    const { disruptions, activeAccordions } = this.state;

    return (
      <div>

        {disruptions.length > 0 ? (
          disruptions.map((post, postIndex) => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAccordions[postIndex] ? 'wmnds-is--open' : ''}`}>

ReactJS 手风琴 - 在应该一次打开一个时打开所有手风琴

ReactJS Accordion - Opening All Accordions When It Should Open One At A Time

reactjs

react-state