reactjs - React Modal 在标题组件中不起作用

Question

我的标题（引导程序）中有一个登录组件，当我单击时需要打开一个模式。我正在使用 react-modal（npm 包）中的 Modal。即使我没有收到错误，弹出窗口也不会打开。

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>`

Answer 1

您需要()从通话中删除括号。您提供的onClick是要调用的函数，而不是像 Angular 等其他框架那样运行的代码。

所以，那将是onClick={this.handleOnClick}

Answer 2

这是工作代码。

   <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>