0

我是新手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>
    )
  }
}

所以，在这里我想做的是有三个按钮，如果其中任何一个被折叠，其他不应该是。所以，我为每个崩溃保持了三个状态。现在，状态发生了变化，但是当我第一次单击时，状态并没有发生变化。

那么，我做错了什么？

谁能帮我这个？

4

1 回答 1

0

由于您使用的是引导程序，因此我们确实没有简单的方法来更改提供给我们的折叠/显示功能。我们可以做的是通过一些条件渲染来解决它。

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>
    );
  }
}
于 2019-05-13T06:53:21.397 回答