react-modal shouldCloseOnOverlayClickが機能しない

Question

私は反応モーダルを使用していますが、オーバーレイをクリックしてもモーダルは閉じません。私はisOpenとonRequestCloseの両方に小道具を提供しますが、モーダルは開いたままです。

closeModal=() => { 
    this.setState({ modalIsOpen: false }); 
}; 

    <Modal 
    isOpen={this.state.modalIsOpen} 
    onRequestClose={this.closeModal} 
    shouldCloseOnOverlayClick={true} 
    > 
    <div>This is my Modal</div> 
    <Button onClick={this.closeModal}>Close Modal<Button> 
</Modal> 

これはこれまでの問題であることはわかっています。私が試すことができる何か他にありますか？前もって感謝します。

Answer 1

ドキュメントから、あなたはこれを参照することができます：それは（ オーバーレイ領域）の外側をクリックすると、モーダルが閉じられているデフォルトでは

を。この動作を防止したい場合は、 の 'shouldCloseOnOverlayClick' propを 'false'値で渡すことができます。あなたのコードは正常に見える

、多分問題は、使用しているバージョンである、shouldCloseOnOverlayClick小道具に問題がある可能性があります。小道具を追加せずに試してみて、反応モーダルバージョンも確認してください。

Answer 2

この問題は、2.2.2で修正されています。

Answer 3

あなたが反応を伴うモーダルを使用するための簡単なモードを持っているなら、私にとっては最善の方法はテンプレートからの挿入ですindex.html私の場合はパブリックフォルダのファイルですブートストラップとjQueryのCDNリンクとそこにModal index.jsとmodal.jsの2つのファイルを作成します。

最初はコード `import from react 'react'です。 import MOdal from './ pomocna_modal';

クラスModal_glはReact.Component {

promena(){ 
    alert('alert'); 
} 

render(){ 

    const user={ 
     id: 0, 
     name:"Naslov modala prvog", 
     title: "Telo modala jedan", 
     }; 

    return(
     <div> 
      <button type="button" className="btn btn-primary btn-lg" 
        data-toggle="modal" data-target="#myModal" onClick={this.promena} 
      ref="prvoDugme"> 
       Launch demo modal 
      </button> 
      <button type="button" className="btn btn-primary btn-lg" 
        data-toggle="modal" data-target="#myModal" 
        ref="drugoDugme"> 
       Drugi poziv istog modala sa promenjenim podacima 
      </button> 
      <MOdal titlem={this.props.title} modalb={this.props.name} user={user} /> 

     </div> 
    ); 
} 

}

エクスポートデフォルトModal_glを拡張します。第二のコードで

は

/** 

*が19-JAN-18にtrikaによって作成されます。 */ インポート 'リアクション'から反応します。

クラスモーダルReact.Component {

render() { 
    console.log(this.props); 
    return (

     <div className="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel"> 
      <div className="modal-dialog" role="document"> 
       <div className="modal-content"> 
        <div className="modal-header"> 
         <button type="button" className="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
         <h4 className="modal-title" id="myModalLabel">{this.props.user.name}</h4> 
        </div> 
        <div className="modal-body"> 
         {this.props.user.title} 
        </div> 
        <div className="modal-footer"> 
         <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" className="btn btn-primary">Save changes</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 

を}延び。 デフォルトをエクスポートする。あなたはこのデータトグルのようなモーダルを呼び出したい場所から、HTMLタグの間にブートストラップコードを使用する必要がありますモーダル呼び出すための

=小道具を追加することなく、データ・ターゲット=「＃1 myModal」