反应模式关闭按钮不起作用

Question

我正在使用React-Modal，但是我的按钮关闭模态的按钮没有触发OnClick = {this.handleclosemodal}，使模态内部的按钮完全没有反应。我已经尝试了几个小时，无法弄清楚为什么这不起作用。没有错误在控制台中弹出，我无法登录任何内容。...请参阅下面的代码，我只是在没有答案的情况下将头击败了墙壁。我对反应的新手是新手，但觉得应该这样做，因为没有错误。预先感谢您！

  class Project extends React.Component {
    constructor () {
        super();
            this.state = {
              showModal: false
        };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
    this.setState({ showModal: true });
}
handleCloseModal () {
    this.setState({ showModal: false });
}
componentWillMount() {
    ReactModal.setAppElement('body');
}
    render() {
        const details = this.props.details;
        return (
            <li className="Project" onClick={this.handleOpenModal}>
                <img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
                <div className="Project-overlay">
                    <p>{details.name}</p>
                </div>
                <div >
                    <ReactModal 
                    isOpen={this.state.showModal} 
                    contentLabel="This is my Mods" 
                    shouldCloseOnOverlayClick={true}
                    onRequestClose={this.handleCloseModal}
                    >
                    <div className="modal-header">
                        <h3>{details.name}</h3>
                    </div>
                    <div className="modal-body">
                    </div>
                    <div className="modal-footer">
                        <button onClick={this.handleCloseModal}>Close Modal</button>
                    </div>
                    </ReactModal>
                </div>
                <div className="Project-tag">
                    <p>{details.tag}</p>
                </div>
            </li>
        )
    }
}

Answer 1

尝试删除LI标签外部的模态？我只是在这里进行疯狂的猜测，也许它触发了onclick = {this.handleopenmodal}，因为它是列表项目的孩子，所以在哪里单击模式？值得一试：）