如何修复反应中的折叠按钮？

Question

我想定义一个加号按钮，当您单击它时会展开您的内容并将加号转换为减号。你能帮我修复以下 class:

中的折叠按钮吗

import React from "react";


class FaqButton extends React.Component {
  constructor() {
    super();
    this.state = {
      button: <span>&#43;</span>,
      flag: 0,
      classN: "button-plus",
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    if (this.state.flag === 0) {
      this.setState({
        button: <span>&#8211;</span>,
        flag: 1,
        classN: "selected",
      });
    } else {
      this.setState({
        button: <span>&#43;</span>,
        flag: 0,
        classN: "button-plus",
      });
    }
  }
  render() {
    return (
      <div>
        <button className={this.state.classN} onClick={this.handleClick}>
          {this.state.button}
        </button>

        
      </div>
    );
  }
}

export default FaqButton;

Answer 1

仅保持flag状态，在此基础上您可以更改模板。并且您还可以显示基于 flag 属性中 state 的内容，如下所示，

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      flag: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      flag: this.state.flag === 0 ? 1 : 0
    });
  }
  render() {
    return (
      <div>
        <button
          className={this.state.flag === 1 ? "selected" : "button-plus"}
          onClick={this.handleClick}
        >
          {this.state.flag === 1 ? <span>&#8211;</span> : <span>&#43;</span>}
        </button>
        {this.state.flag === 1 && (
          <div style={{ border: "2px solid green" }}>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum.
          </div>
        )}
      </div>
    );
  }
}

演示 - https://codesandbox.io/s/sad-einstein-thokp?file=/src/App.js:95-1627

如何修复反应中的折叠按钮？

How to fix a collapse button in react?

reactjs

collapse