Попытка установить состояние из другого компонента, чтобы мой модал мог появиться - PullRequest
Новая
       30

Попытка установить состояние из другого компонента, чтобы мой модал мог появиться

1 голос
/ 26 июня 2019

Привет, у меня есть два компонента ExportReportRoomSelectionModal и Header, оба имеют свою логику и состояние. Я хочу открыть модал «Выбор комнаты для отчета об экспорте» с помощью кнопки на компоненте «Заголовок», и для этого я должен установить для параметра «Состояние на ExportReport ....» значение show: true. Я попытался передать handleShow function в качестве реквизита в Headers.js, а затем в заголовке. Я хочу подключить его к элементу, который вызывает ExportReport .... Модальный. Но я не получаю никаких реквизитов на Header вообще. 


import Header from './Header.js';
export default class ExportReportRoomSelectionModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false,
    };

    this.handleHide = this.handleHide.bind(this);
    this.handleShow = this.handleShow.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleHide() {
    this.setState({show: false});
  }

  handleShow() {
    this.setState({show: true});
  }

  render() {
    return (
      <Modal className="layout-scale-desktop layout-scale-45" onHide={this.handleHide} show={this.state.show}>
        <Modal.Header closeButton>
          <Modal.Title>Print PDF</Modal.Title>
        </Modal.Header>
        <Modal.Body>

        </Modal.Body>
        <Modal.Footer>
          <Button bsStyle="primary" onClick={this.handleSend}>Send PDF</Button>
          <Button bsStyle="primary" onClick={this.handleHide}>Close</Button>
        </Modal.Footer>
        <Header showModal={this.handleShow} />
      </Modal>
    );
  }
}

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { }; 
  }
  render() {
    return (
      <div>
        <nav className="navbar navbar navbar-default">
          <div className="navbar-header">
            <a className="navbar-brand" 
              <li>
                <a href="#" 
                  data-toggle="modal"
                  onClick={this.props.showModal}
                >
                {t("reports")}
                </a>
              </li>
      ...
    )
  }
}

1 Ответ

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

Вы делаете это наоборот? Вы помещаете ваш <Header /> в <Modal />, который не смонтирован, пока вы не нажмете на тег <a/>. Ваш модал должен быть внутри заголовка и реквизиты должны быть переданы из заголовка.

Должно быть:

Заголовок 

import ExportReportRoomSelectionModal from "./yourmodal";

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false
    }; 
  }

  toggleModal = () => {
    this.setState(prevState => ({
      modalIsOpen: !prevState.modalIsOpen
     });
  }

  render() {
    return (
      <div>
        <nav className="navbar navbar-oxehealth navbar-default">
          <div className="navbar-header">
            <a className="navbar-brand">
              <li>
                <a href="#" 
                  data-toggle="modal"
                  onClick={this.showModal}
                >
                {t("reports")}
                </a>
              </li>
            </a>
            <ExportReportRoomSelectionModal
               modalIsOpen={this.state.modalIsOpen}
               toggleModal={this.toggleModal}
             />
         </div>
        </nav>
      </div>
    )
  }
}

Модальные 

export default class ExportReportRoomSelectionModal extends React.Component {
  render() {
    return (
      <Modal
        className="layout-scale-desktop layout-scale-45"
        onHide={this.props.toggleModal}
        show={this.props.modalIsOpen}
      >
        <Modal.Header closeButton>
          <Modal.Title>Print PDF</Modal.Title>
        </Modal.Header>
        <Modal.Body></Modal.Body>
        <Modal.Footer>
          <Button bsStyle="primary" onClick={this.handleSend}>
            Send PDF
          </Button>
          <Button bsStyle="primary" onClick={this.handleHide}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}
...