Question

点击后我要换班，它可以工作。问题在于，类在两个元素中同时更改，而不是在每个元素中单独更改。也许有人会看我在做什么错。任何帮助将是有用的。

import React, { Component } from "react";

class PageContentSupportFaq extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false
    };
  }

  handleToggle(e) {
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  }

  render() {
    const { isExpanded } = this.state;
    return (
      <div className="section__support--faq section__full--gray position-relative">
        <div className="container section__faq">
          <p className="p--thin text-left">FAQ</p>
          <h2 className="section__faq--title overflow-hidden pb-4">Title</h2>
          <p className="mb-5">Subtitle</p>
          <div className="faq__columns">
            <div
              onClick={e => this.handleToggle(e)}
              className={isExpanded ? "active" : "dummy-class"}
            >
              <p className="mb-0">
                <strong>First</strong>
              </p>
            </div>

            <div
              onClick={e => this.handleToggle(e)}
              className={isExpanded ? "active" : "dummy-class"}
            >
              <p className="mb-0">
                <strong>Second</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PageContentSupportFaq;

Answer 1

您可以先获得两个状态，然后再获得第二个状态，并使用两个这样的函数进行处理

   import React, { Component } from 'react';

    class PageContentSupportFaq extends Component {
      constructor(props) {
        super(props)
        this.state = {
          isExpanded: false,
          isExpanded2:false,
        }
      }

      handleToggle(e){
        this.setState({
          isExpanded: !this.state.isExpanded
        })
      }
     handleToggle2(e){
        this.setState({
          isExpanded2: !this.state.isExpanded2
        })
      }

      render() {
        const {isExpanded,isExpanded2} = this.state;
        return (
          <div className="section__support--faq section__full--gray position-relative">


            <div className="container section__faq">
              <p className="p--thin text-left">FAQ</p>
              <h2 className="section__faq--title overflow-hidden pb-4">Title</h2>
              <p className="mb-5">Subtitle</p>
              <div className="faq__columns">

                <div onClick={(e) => this.handleToggle(e)} className={isExpanded ? "active" : "dummy-class"}>
                  <p className="mb-0"><strong>First</strong></p>
                </div>

                <div onClick={(e) => this.handleToggle2(e)} className={isExpanded2 ? "active" : "dummy-class"}>
                  <p className="mb-0"><strong>Second</strong></p>
                </div>


              </div>

            </div>

          </div>
        );
      }

    }

    export default PageContentSupportFaq;

Answer 2

您需要跟踪数组中的切换类，这样它将支持任意数量的组件：

// Save elements data into array for easier rendering
const elements = [{ id: 1, name: "First" }, { id: 2, name: "Second" }];

class PageContentSupportFaq extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: []
    };
  }

  handleToggle(id) {
    this.setState(state => {
      if (state.isExpanded.includes(id)) {
        return state.isExpanded.filter(elId => elId !== id);
      }
      return [...state.expanded, id];
    });
  }

  render() {
    return elements.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={this.isExpanded(el.id) ? "active" : "dummy-class"}
      >
        <p className="mb-0">
          <strong>{el.name}</strong>
        </p>
      </div>
    ));
  }
}

Answer 3

每个元素必须具有其单独的扩展值。所以我们需要一个状态数组。

这是代码：

import React, { Component } from "react";

class PageContentSupportFaq extends Component {
  state = {
    items: [
      { id: 1, name: "First", expanded: false },
      { id: 2, name: "Second", expanded: true },
      { id: 3, name: "Third", expanded: false }
    ]
  };

  handleToggle = id => {
    const updatedItems = this.state.items.map(item => {
      if (item.id === id) {
        return {
          ...item,
          expanded: !item.expanded
        };
      } else {
        return item;
      }
    });

    this.setState({
      items: updatedItems
    });
  };

  render() {
    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "active" : "dummy-class"}
      >
        <p className="mb-0">
          <strong>{el.name}</strong>
          <span> {el.expanded.toString()}</span>
        </p>
      </div>
    ));
  }
}

export default PageContentSupportFaq;

仅在一个元素上切换类，对js进行反应

3 个答案: