React Modal не работает в компоненте заголовка

У меня есть компонент входа в систему в моем заголовке (bootstrap), который должен открывать модальное окно, когда я нажимаю. Я использую модальное окно из реактивного модального окна (пакет npm). Хотя я не получаю сообщения об ошибке, всплывающее окно не открывается.

this.state={
    openModal:false
}

closeModal=()=>{
    this.setState({openModal:false})
}

 handleOnClick=()=>{
     this.setState({openModal:true}
 }

Компонент заголовка

` <ul className="nav navbar-nav navbar-right">
                    <li onClick={this.handleOnClick()}><a href="#">
                    <Modal 
                        isOpen={this.state.openModal}
                        onRequestClose={this.closeModal}
                        style={customStyles}
                        contentLabel="Example Modal"
                    >
                    <span class="glyphicon glyphicon-user"></span></Modal> Sign Up</a></li>

                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>`

reactjs react-modal
person Erick    schedule 09.06.2018    source источник
comment
добавьте код, в котором вы пытаетесь открыть модальный   -  person aravind_reddy    schedule 09.06.2018
comment
@aravind_reddy Я добавил код, в котором пытаюсь открыть модальный   -  person Erick    schedule 09.06.2018

Ответы (2)


arrow_upward
1
arrow_downward

Нужно убрать скобки () с звонка. Вы даете onClick вызываемую функцию, а не код для запуска, как в других фреймворках, таких как Angular.

Итак, это будет onClick={this.handleOnClick}

person Meligy    schedule 09.06.2018

arrow_upward
0
arrow_downward

Это рабочий код.

   <ul className="nav navbar-nav navbar-right">
                            <li  onClick={this.handleOnClick}><a href="#">
                            <Modal 
                                isOpen={this.state.openModal}
                                onRequestClose={this.closeModal}
                                style={customStyles}
                                content

                            ><LoginComponent />
                        </Modal> Login</a></li>
person Erick    schedule 09.06.2018