React response-bootstrap - Как закрыть модальное окно от внешнего компонента - PullRequest
Новая
       33

React response-bootstrap - Как закрыть модальное окно от внешнего компонента

0 голосов
/ 06 июня 2019

Я использую версии: 

react@16.8.6
react-bootstrap@1.0.0-beta.8

У меня есть простой модальный компонент: 

import React, { Component } from 'react'

import { Modal } from "react-bootstrap";
import { ProgressBar } from "react-bootstrap";

class ProgressModal extends Component {
  constructor(...args) {
    super(...args);

    this.state = { showModal: false, titleText: ((this.props.titletext === undefined || this.props.titletext === null || this.props.titletext === "") ? "Working..." : this.props.titletext)};

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({showModal: true});
  }

  close() {
    this.setState({showModal: false});
  }

  render() {
    return (
      <Modal centered backdrop="static" keyboard={false} {...this.props}>
        <Modal.Header>
          <Modal.Title className="font-weight-bold">{this.state.titleText}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <ProgressBar animated striped now={100} />
        </Modal.Body>
      </Modal>
    );
  }
}

export default ProgressModal;

Он предназначен для более длительной работы (например, входа в систему). Я хочу открыть его, когда пользователь нажимает кнопку входа в систему, а затем закрыть его после завершения входа в систему. У меня возникают трудности с поиском способа закрыть его, кроме использования кнопки закрытия из модального окна: 

<Button className="btn-block" variant="danger" onClick={this.props.onHide}>Close</Button>

Это, конечно, позволяет пользователю закрывать его только тогда, когда он хочет. Я добавил в компонент метод открытия и закрытия, который я хотел бы вызвать из внешних компонентов.

Я пробовал несколько вещей:

Добавление идентификатора, его нахождение с использованием getElementById, а затем запуск метода.

Добавление ссылки на открывающий компонент, как описано здесь.

Выполнение этого программно, как описано здесь.

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

Учитывая все вышесказанное, у меня все еще нет возможности автоматически закрыть модальное окно снаружи модального компонента.

1 Ответ

0 голосов
/ 07 июня 2019

Вот что я в итоге сделал.Я не смог заставить работать логику 'ref', поэтому я использовал глобальную ссылку в конструкторе: 

window.progressModal = this;

Мне также нужно было изменить код закрытия, поскольку установка переменной состояния showModal на falseничего не делал, чтобы закрыть модальное окно.Если для свойства showModal установлено значение true, окно открывается: 

<Modal id={"progress-bar-modal-window"} show={this.state.showModal} centered  backdrop="static" keyboard={false} {...this.props}>

open() {
  this.setState({showModal: true});
}

close() {
  this.props.onHide();
}

Теперь внешние компоненты могут открывать модальное окно с помощью: 

window.progressModal.open();

и закрывать его, используя: 

window.progressModal.close();
...