使用React显示弹出式菜单时隐藏导航条

Question

我最终是想隐藏我的bootstrap导航条，它有以下功能 position: sticky-top 当我显示一个弹出式幻灯片。我使用的是react。我试过在我的on click handler中选择navbar元素，并改变显示方式，但这不起作用。当显示幻灯片时，它删除了导航条，但当幻灯片关闭时，又无法将其添加回来。我怀疑可能是因为导航条没有重新渲染？由于弹出窗口不是导航条的子窗口，我无法将状态传递给它。我还停止了子元素的传播，以防止关闭幻灯片，这也可能是一个问题。

我的on-click处理程序。

  toggleSlideVisibility = () => {
    const largeNav = document.getElementById("largeNav");
    if (largeNav.style.display === "none") {
      largeNav.style.display = "flex";
    } else {
      largeNav.style.display = "none";
    }
    console.log(largeNav.style.display);
    this.setState({ slidesVisible: !this.state.slidesVisible });
  }; 

我的幻灯片有一个模态，

<div className="modalView" onClick={props.toggle}>
  <div
    id="vintageSlideShow"
    className="carousel slide"
    data-ride="carousel"
    onClick={(e) => e.stopPropagation()}
  >
    <ol className="carousel-indicators">
      <li
        data-target="#vintageSlideShow"
        data-slide-to="0"
        className="active"
      ></li>
      <li data-target="#vintageSlideShow" data-slide-to="1"></li>
      <li data-target="#vintageSlideShow" data-slide-to="2"></li>
      <li data-target="#vintageSlideShow" data-slide-to="3"></li>
    </ol>
    <div className="carousel-inner">
      <div className="carousel-item active">
        <img
          className="d-block img-responsive"
          src={image1}
          alt="First"
          onClick={(e) => e.stopPropagation()}
        />
      </div>
      <div className="carousel-item ">
        <img className="d-block img-responsive" src={image2} alt="Second" />
      </div>
      <div className="carousel-item ">
        <img className="d-block img-responsive" src={image3} alt="Third" />
      </div>
      <div className="carousel-item ">
        <img className="d-block img-responsive" src={image4} alt="Fourth" />
      </div>
    </div>
  </div>
  <span className="closer" onClick={props.toggle}>
    close
  </span>
</div>

Answer 1

我不确定你是否使用redux，但如果你使用，你可以将全局状态存储在reducer中。如果没有，你也可以使用React上下文来存储你的全局状态。当你想让导航条消失时，你可以调用一个动作。

// example

this.props.hideNav();

Answer 2

当模态按钮被按下时（在模态组件内），我们需要将此传达给父体，父体可以通过改变容纳导航的类来切换导航的可见性。

相关的 CSS:

.showBar{display:block}
.hideBar{display:none;}

相关的 母JS:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      navVisible: true
    };
  }

  toggleNavVisibility = () => {
    this.state.navVisible
      ? this.setState({ navVisible: false })
      : this.setState({ navVisible: true });
  };

  render() {
    return (
      <div className="mainContent">
        <Hello name={this.state.name} />
        <p>Start editing to see some magic happen :)</p>
        <div className={this.state.navVisible ? "showBar" : "hideBar"}>
          <TopBar />
        </div>
        <section>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus
          <br />
          <ModalExample
            buttonLabel={"launch Modal"}
            className={"simple"}
            modalTitle="My slide show"
            onModalClick={this.toggleNavVisibility.bind(this)}
          />
        </section>
      </div>
    );
  }
}

相关的 模式组件:

const ModalExample = props => {
  const { buttonLabel, className, modalTitle, onModalClick } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => {
    setModal(!modal);
    onModalClick();
  };

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        {buttonLabel}
      </Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>{modalTitle}</ModalHeader>
        <ModalBody>This is where you can have your slideshow...</ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

工作 这里是堆栈闪电战