React-Modal Closeボタンが機能しません

Question

私は反応モーダルを使用していますが、モーダルを閉じるためのボタンは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}をトリガしています。これは、それがリスト項目の子であるので、モーダルをクリックするとどこですか？試しに値する：