Скрыть NavBar при отображении всплывающего окна с React - PullRequest
Новая
       86

Скрыть NavBar при отображении всплывающего окна с React

1 голос
/ 02 мая 2020

В конечном итоге я пытаюсь скрыть свою bootstrap навигационную панель с position: sticky-top, когда я показываю всплывающее слайд-шоу. Я использую реагировать. Я попытался выбрать элемент navbar в моем обработчике при нажатии и изменить отображение, но это не работает. Он удалил панель навигации при показе слайд-шоу, но затем не может добавить его обратно, когда слайд-шоу закрыто. Я подозреваю, что это может быть из-за того, что navbar не рендерится? Поскольку всплывающее окно не является дочерним элементом навигационной панели, я не могу передать ему состояние. Я также остановил распространение в дочерних элементах, чтобы предотвратить закрытие слайд-шоу, что также может быть проблемой?

мой обработчик при нажатии: 

  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>

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Когда нажата модальная кнопка (внутри модального компонента), нам нужно сообщить об этом родителю, который может переключать видимость навигации, изменяя класс, в котором находится навигация;

релевантный 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>
  );
};

работает стек * здесь

0 голосов
/ 02 мая 2020

Я не уверен, что вы используете избыточность, но если вы это сделаете, вы можете сохранить глобальное состояние в восстановителе. Если нет, вы также можете использовать контекст React для хранения вашего глобального состояния. Если вы хотите, чтобы ваша панель навигации исчезла, вы можете вызвать действие. 

// example

this.props.hideNav();
...