反應模式關閉按鈕不起作用

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}，無論您在何處單擊Modal，因為它是列表項的子項？ 值得一試 ：）