Question

嗨，我有两个组件ExportReportRoomSelectionModal和Header都有自己的逻辑和状态。我想通过页眉组件上的按钮打开“导出报告室选择模式”，为此，我必须将ExportReport ....上的“状态”设置为show: true。我尝试将handleShow function作为道具传递给Headers.js，然后在标头上将其连接到触发ExportReport .... Modal的元素。但是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>
      ...
    )
  }
}

Answer 1

您是否正在以其他方式进行操作？您将<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>
    );
  }
}

模式

if (!doc.containsKey('publishDate')) {
    return 1;
}

尝试从另一个组件设置状态，以便可以弹出我的模态

1 个答案: