如何从另一个HOC包装的组件中调用Modal

Question

我一直在努力如何从用HOC包装的另一个组件（redux形式）中调用模态，我一直可以打开模态，直到我没有用HOC组件包装

用HOC组件包装后，它没有破坏性

正在关注此链接Click Here

导航栏组件，我想从该组件使用参考打开

class TopBar extends Component {

loginModalRef = ({ handleShow }) => {
    this.showModal = handleShow;
}

onLoginClick = () => {
    this.showModal();
}


render() {

    const { icon, number } = this.props


    return (
        <section id="topbar" className="d-lg-block " >

            {
                //Reference of Modal Component  // 
            }
            <LoginModal ref={this.loginModalRef}></LoginModal>
            <div className="container clearfix" >
                <div className="contact-info float-left" >
                    <i className={icon}></i>{number}
                </div>
                <div className="social-links float-right displaynonestripe">
                    <NavLink to='/why-us' className="twitter">START HERE</NavLink>
                    <NavLink to='/about' className="facebook ">ABOUT US </NavLink>
                    <NavLink to='/contact-us' className="facebook" onClick={this.onLoginClick}>Modal Open</NavLink>
                    <NavLink to='/profile' className="facebook" >PROFILE {localStorage.getItem('isLogin')} </NavLink>

                </div>
            </div>

        </section>
    );


}

}



export default TopBar;

模态组件

export class SignInAndRegister extends Component {

state = {
    showModal: true,
}

handleClose = () => {
    this.setState({
        showModal: false
    })
    //this.islogin(true)
};

handleShow = () => {
    this.setState({
        showModal: true
    })
};

handleRegister = (values) => {

    const errors = {}
    if (values.password !== values.confirmpassword) {
        errors.confirmpassword = 'password did not match'
    }
    return errors
}

handleLogin = (values) => {
    console.log(values)
}


render() {

    const { handleSubmit, reset, submitting } = this.props

    //validation

    //Max Length
    const maxLength = max => value =>
        value && value.length > max ? `Must be ${max} characters or less` : undefined
    const maxLength15 = maxLength(15)

    //Check is value isNAN
    const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined

    //Email Validation
    const email = value =>
        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
            'Invalid email address' : undefined

    //Password Validation        
    const password = value => value && !/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/.test(value) ?
        'at least one number, one lowercase and one uppercase letter & least six characters' : undefined

    return (

        <Modal show={this.state.showModal} onHide={this.handleClose} animation={true} size="xl">
            <Modal.Body className='p-0'>
                <div className="login-row">
                    <ul className="nav nav-tabs d-block d-sm-block d-md-none d-lg-none d-xl-none" id="myTab" role="tablist">
                        <li className="nav-item">
                            <a className="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                                aria-selected="true">Login</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
                                aria-selected="false">Sign Up</a>
                        </li>
                    </ul>
                    <div className="tab-content" id="myTabContent">

                        <div className="tab-pane fade signup-tab" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div className="signup-sec">
                                <h3>Registration</h3>
                                <form onSubmit={handleSubmit(this.handleRegister)}>
                                    <Field name='firstName' type='text' label='First Name' component={FormInput} />
                                    <Field name='lastName' type='text' label='Last Name' component={FormInput} />

                                    <div className="row">
                                        <div className="col-md-6">
                                            <Field validate={email} name='email' type='text' label='Email' component={FormInput} />
                                        </div>
                                        <div className="col-md-6">
                                            <Field validate={[number, maxLength15]} name='mobile' type='number' label='Mobile' component={FormInput} />
                                        </div>
                                        <div className="col-sm-6">
                                            <Field validate={[password]} name='password' type='password' label='Password' component={FormInput} />
                                        </div>
                                        <div className="col-sm-6">
                                            <Field validate={[password]} name='confirmpassword' type='password' label='Confirm Password' component={FormInput} />
                                        </div>
                                    </div>

                                    <Field style={{
                                        display: 'inlineBlock',
                                        height: '17px',
                                        width: '17px',
                                        marginBottom: '0.5rem'
                                    }} name='termAndCondition' type='checkbox' component={FormInput} />
                                    <div className="agree-text ml-1">I agree to the <a href="#">Terms and conditions</a></div>


                                    <div className="form-group text-center mt-4">
                                        <button type="submit" className="btn btn-primary monthly-btn">Sign Up</button>
                                   </div>
                               </form>
                           </div>
                       </div>
                   </div>
               </div>
           </Modal.Body>
       </Modal>

    )
  }
}
export default reduxForm({
    form: 'register',
    formLogin: 'login',
    validate
})(SignInAndRegister)