Компонент локальное состояние не получает состояние при использовании свертывания

Question

Я новичок в react.js. Здесь у меня есть кнопка, при нажатии на которую открывается один раскрывающийся список.

export default class NewCollapse extends Component {

  constructor(props) {
    super(props);
    this.state = {
      quizEnable: false,
      viewEnable: false,
      uploadEnable: false
    }
  }
  EnableQuiz = () => {
    this.setState({
      quizEnable: true,
      viewEnable: false,
      uploadEnable: false
    });
  }
  EnableView = () => {
    this.setState({
      quizEnable: false,
      viewEnable: true,
      uploadEnable: false
    });
  }

  EnableUpload = () => {
    this.setState({
      quizEnable: false,
      viewEnable: false,
      uploadEnable: true
    });
  }
  render() {
    return (
      <div class="container">
        <div id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
            <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <button href="#menupos1" data-toggle="collapse" data-parent="#mainmenu">Quick Action<span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></button>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" onClick={this.EnableQuiz} class="list-group-item sub-item" data-toggle={this.state.viewEnable === true ? "collapse" : "#"} data-parent="#submenu1">Quiz<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
              <div class="collapse list-group-submenu" id="submenu1">
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
                  <img src={CreateNewQuizIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Create New</label>
                </a>
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
                  <img src={ViewQuizIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">View</label>
                </a>
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
                  <img src={EditQuizIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Update</label>
                </a>
              </div>
              <a href="#submenu2" onClick={this.EnableView} class="list-group-item sub-item" data-toggle={this.state.viewEnable === true ? "collapse" : "#"} data-parent="#submenu2">View<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
              <div class="collapse list-group-submenu" id="submenu2">
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
                  <img src={JobDescriptionIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Job Description</label>
                </a>
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
                  <img src={ResumeIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Resume</label>
                </a>

              </div>
              <a href="#submenu3" onClick={this.EnableUpload} class="list-group-item sub-item" data-toggle={this.state.uploadEnable === true ? "collapse" : "#"} data-parent="#submenu3">Upload<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
              <div class="collapse list-group-submenu" id="submenu3" >
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
                  <img src={UploadFolderIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Folder</label>
                </a>
                <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
                  <img src={UploadResumeIcon} className="img-thumbnail menu-icons" />
                  <label className="list-component">Resume</label>
                </a>
              </div>
              <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
                <img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Download Tracker</label>
              </a>
              <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
                <img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Selection Criteria</label>
              </a>
              <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
                <img src={RemoveIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Remove</label>
              </a>
            </div>
          </div>

        </div>
      </div>
    )
  }
}

Итак, здесь я хочу сделать три кнопки, если одна из них свернута, остальные не должны быть. Итак, я сохранил три состояния для каждого коллапса. Теперь состояние меняется, но когда я впервые щелкаю, состояние не меняется.

Итак, что я делаю не так?

Может ли кто-нибудь помочь мне с этим?

Answer 1

Поскольку вы используете загрузчик, у нас нет простого способа изменить предоставляемые нам функции свертывания / показа. Что мы можем сделать, так это обойтись с помощью условного рендеринга.

export default class NewCollapse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quizEnable: false,
      viewEnable: false,
      uploadEnable: false
    };
  }
  enableQuiz = () => {
    this.setState({
      quizEnable: true,
      viewEnable: false,
      uploadEnable: false
    });
  };
  enableView = () => {
    this.setState({
      quizEnable: false,
      viewEnable: true,
      uploadEnable: false
    });
  };

  enableUpload = () => {
    this.setState({
      quizEnable: false,
      viewEnable: false,
      uploadEnable: true
    });
  };
  render() {
    return (
      <div className="container">
        <div id="mainmenu" className="row">
          <div className="list-group panel visible-md visible-lg">
            <a href="/" className="list-group-item">
              <i className="glyphicon glyphicon-home" />
            </a>
          </div>
          <div className="list-group panel">
            <button
              href="#menupos1"
              data-toggle="collapse"
              data-parent="#mainmenu"
            >
              Quick Action
              <span className="menu-ico-collapse">
                <i className="glyphicon glyphicon-chevron-down" />
              </span>
            </button>
            <div className="collapse pos-absolute" id="menupos1">
              <span
                href="#submenu1"
                onClick={this.enableQuiz}
                className={
                  this.state.quizEnable
                    ? "list-group-item sub-item"
                    : "list-group-item sub-item collapsed"
                }
                data-toggle="collapse"
                data-parent="#submenu1"
                aria-expanded={this.state.quizEnable}
              >
                Quiz
                <span class=" menu-ico-collapse">
                  <i class="glyphicon glyphicon-chevron-down" />
                </span>
              </span>
              <div
                className={
                  this.state.quizEnable
                    ? "list-group-submenu collapse show"
                    : "collapse list-group-submenu"
                }
                id="submenu1"
              >
                <a
                  href="#"
                  class="list-group-item sub-sub-item"
                  data-parent="#submenu1"
                >
                  <img
                    src={CreateNewQuizIcon}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Create New</label>
                </a>
                <a
                  href="#"
                  class="list-group-item sub-sub-item"
                  data-parent="#submenu1"
                >
                  <img
                    src={ViewQuizIcon}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">View</label>
                </a>
                <a
                  href="#"
                  class="list-group-item sub-sub-item"
                  data-parent="#submenu1"
                >
                  <img
                    src={EditQuizIcon}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Update</label>
                </a>
              </div>
              <span
                href="#submenu2"
                onClick={this.enableView}
                className={
                  this.state.viewEnable
                    ? "list-group-item sub-item"
                    : "list-group-item sub-item collapsed"
                }
                data-toggle="collapse"
                data-parent="#submenu2"
                aria-expanded={this.state.viewEnable}
              >
                View
                <span className=" menu-ico-collapse">
                  <i className="glyphicon glyphicon-chevron-down" />
                </span>
              </span>
              <div
                className={
                  this.state.viewEnable
                    ? "list-group-submenu collapse show"
                    : "collapse list-group-submenu"
                }
                id="submenu2"
              >
                <a
                  href="#"
                  className="list-group-item sub-sub-item"
                  data-parent="#submenu2"
                >
                  <img
                    src={{JobDescriptionIcon}}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Job Description</label>
                </a>
                <a
                  href="#"
                  className="list-group-item sub-sub-item"
                  data-parent="#submenu2"
                >
                  <img
                    src={ResumeIcon} 
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Resume</label>
                </a>
              </div>
              <span
                href="#submenu3"
                onClick={this.enableUpload}
                className={
                  this.state.uploadEnable
                    ? "list-group-item sub-item"
                    : "list-group-item sub-item collapsed"
                }
                data-toggle="collapse"
                data-parent="#submenu3"
                aria-expanded={this.state.uploadEnable}
              >
                Upload
                <span className=" menu-ico-collapse">
                  <i className="glyphicon glyphicon-chevron-down" />
                </span>
              </span>
              <div
                className={
                  this.state.uploadEnable
                    ? "list-group-submenu collapse show"
                    : "collapse list-group-submenu"
                }
                id="submenu3"
              >
                <a
                  href="#"
                  className="list-group-item sub-sub-item"
                  data-parent="#submenu3"
                >
                  <img
                    src={UploadFolderIcon}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Folder</label>
                </a>
                <a
                  href="#"
                  className="list-group-item sub-sub-item"
                  data-parent="#submenu3"
                >
                  <img
                    src={UploadResumeIcon}
                    className="img-thumbnail menu-icons"
                  />
                  <label className="list-component">Resume</label>
                </a>
              </div>
              <a
                href="#"
                data-toggle="collapse"
                data-target="#menupos1"
                className="list-group-item sub-item"
              >
                <img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Download Tracker</label>
              </a>
              <a
                href="#"
                data-toggle="collapse"
                data-target="#menupos1"
                className="list-group-item sub-item"
              >
                <img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Selection Criteria</label>
              </a>
              <a
                href="#"
                data-toggle="collapse"
                data-target="#menupos1"
                className="list-group-item sub-item"
              >
                <img src={RemoveIcon} className="img-thumbnail menu-icons" />
                <label className="list-component">Remove</label>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}