Question

我的标题（bootstrap）中有一个Login组件，当我点击时需要打开一个Modal。我正在使用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>

React Modal在Header组件中不起作用

2 个答案: