Question

在React js中打开新模态时，我无法关闭当前模态。请帮我。我有父模式：Register_modal和它的子项：RegisterCode_Modal 父模态在标题组件中调用：

首先

：标题组件

这个组件调用第一个模态并传递打开和关闭它的道具：

import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import {NavLink} from 'react-router-dom';
import Register_Modal from './Register_Modal';


export default class Header extends Component {
    constructor() {
        super();

        this.state = {
         modalIsOpen: false
        };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    }

    openModal(e) {
        e.preventDefault();
        this.setState({modalIsOpen: true});
      }

    closeModal(e) {
        e.preventDefault();
        this.setState({modalIsOpen: false});
      }

  render() {
    return (
<div>
<div className="button navbar-right">
   <button className="navbar-btn nav-button wow bounceInRight login"  data-wow-delay="0.45s">ورود</button>
   <button className="navbar-btn nav-button wow fadeInRight"  data-wow-delay="0.48s" onClick={this.openModal} >ثبت نام</button>
                        <div >
 <Register_Modal open={this.state.modalIsOpen} close={this.closeModal} />
                        </div>

</div>
    );
  }


}
---------------------------------------------------------------------------

第二名：父组件

export default class Register_Modal extends Component {
   constructor(props){
       super(props);
       this.state={
           codemodal: false
       };
       this.openCodeModal=this.openCodeModal.bind(this);
       this.closeCodeModal=this.closeCodeModal.bind(this);
   }
   openCodeModal(e){
       e.preventDefault();
       this.setState({codemodal: true});
   }
   closeCodeModal(e){
    e.preventDefault();
    this.setState({codemodal: false});
}
    render() {
      return (
        <div>  
              <Modal  
              isOpen={this.props.open} 
              onRequestClose={this.props.close}
              ariaHideApp={false}
              contentLabel="selected option"
              isClose={this.props.close}
              style={customStyles}
              >
              <h2>salammmmm</h2>
              <button onClick={this.props.close} >انصراف</button>
              <button onClick={this.openCodeModal} >بعدی</button>

              </Modal>
              <div className="ReactModalPortal">
              <RegisterCode_Modal open={this.state.codemodal} close={this.closeCodeModal}  />
              </div>
              {this.props.close}
          </div>

      );}
    }
------------------------------------------------------------------

第三名：子组件

export default class RegisterCode_Modal extends Component {
    constructor(props){
        super(props);
        console.log("injaaaaa");
    }


 render() {
   return (
     <div>  
           <Modal  
           isOpen={this.props.open} 
           onRequestClose={this.props.close}
           ariaHideApp={false}
           contentLabel="ورود کد"
           isClose={this.props.close}
           style={customStyles}
           >
           <h2>مرحله کد</h2>
           <button onClick={this.props.close} >تائید</button>
           </Modal>
       </div>

   );}
 }

Answer 1

你可以通过有条件地渲染它来实现这一点我个人所以这样：

export default class RegisterModal extends Component {
  state = {
    showBaseModal: true,
    codemodal: false,
  };

  openCodeModal = () => {
    this.setState({
      codemodal: true,
      showBaseModal: false,
    });
  };

  closeCodeModal = () => {
    this.setState({ codemodal: false });
  };

  render() {
    return (
      <div>
        {this.state.showBaseModal && (
          <Modal
            isOpen
            onRequestClose={this.props.close}
            ariaHideApp={false}
            isClose={this.props.close}
          >
            <button onClick={this.props.close}>Close</button>
            <button onClick={this.openCodeModal}>Next</button>
          </Modal>
        )}
        {this.state.codemodal && (
          <RegisterCode_Modal
            open={this.state.codemodal}
            close={this.closeCodeModal}
          />
        )}
      </div>
    );
  }
}

为基本模态添加额外状态。在openCodeModal事件中，将其切换为false以停止两个模态对于两个模态，将isOpen始终设置为true，然后有条理地呈现RegisterModal组件。

在Reactjs中打开子模态时父模态有多接近？

第二名：父组件

第三名：子组件

1 个答案: