Question

所以使用react-modal我有一个模式组件，该组件根据传递的道具呈现某种形式。我在模式组件中有一个toggleModal函数，并将其作为道具传递给子组件。然后，我需要将其从第一个子组件传递到另一个子组件，然后单击按钮将其激活。

是专门与react-modal有关，还是与我将道具向下传递两个级别有关？

我不确定为什么它不起作用。它应该相当简单。谢谢！

Modal.component

toggleModal = () => {
      console.log("Closing");
      this.setState(prevState => {
          return { showModal: !prevState.showModal };
      });
  };

  render() {
      return (
          <div className="modalBtn-container">
              <button className={this.props.type} onClick={this.toggleModal}>
                  {this.props.text}
              </button>
              <Modal
                  className={this.props.modalStyle}
                  isOpen={this.state.showModal}
                  onRequestClose={this.toggleModal}
                  contentLabel="popup modal form"
              >
                  {this.props.form}
              </Modal>
          </div>
     );
 }

Modal.component

render() {  
      const { page } = this.state;
      return (
          <div className="quote-container">
              {page === 1 && (
                  <QuoteFormFirstPage
                      onRequestClose={this.props.onRequestClose}
                      onSubmit={this.nextPage}
                      currentPage={page}
                      initialValues={this.props.getAQuoteInitial}
                      enableReinitialize={true}
                  />
              )}

quoteFormPage1.component

<div className="quote-form">
   <form onSubmit={props.handleSubmit}>
       <Stepper steps={3} currentStep={props.currentPage} / (parameter) props: any 
            <div className="cancel-button-container">                           
                <button className="cancel-btn" onClick={props.onRequestClose}>x</button>
            </div>                             
              ...

从子组件的内部（子）组件中关闭模态

0 个答案: