は、コンポーネントにリアクト

Question

私はをやろうとしている何

：私は反応しReduxの使用してプロジェクトを書いているとき、私はRecordTaskPopUpコンポーネントからモーダルをポップアップ表示したいときの状態ManageTimerのisTimeOutコンポーネントはタイマーイベントによって変更されます（わかりやすくするために、isTimeOutをtrueに直接定義しています）。

問題：モーダルは、ページ上に表示されません。私は、問題見つけるためにやっていること

：

1. を私は私のCSSファイルで.modal {display: block}を変更したが、それはまだページに表示されていません。

2. 私もそれは完全に正常に動作し、私のRecordTskPopUpコンポーネントにモーダル以外の何か他のものをレンダリングしてみてください。ですから、問題はモーダルそのものであると思います。

3. は、ブートストラップドキュメントからRecordTaskPopUpの全体のレンダリングスニペットを貼り付けます。

誰かがこの問題の原因である可能性があることを教えてもらえますか？どうもありがとう！

class ManageTimer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isTimeOut: true 
    } 
    this.closePopUp = this.closePopUp.bind(this); 
    } 

    closePopUp() { 
    this.setState({ 
    isTimeOut: false 
    }); 
    } 

    render() { 
    return (
     {this.state.isTimeOut ? 
     <RecordTaskPopUp 
     closePopUp={this.closePopUp}/> : 
     <p>There is still time remaining</p> 
     } 
    ); 
    } 
} 

const RecordTaskPopUp = ({closePopUp}) => { 
    return (
     <div className="modal fade"> 
     <div className="modal-dialog" role="document"> 
      <div className="modal-content"> 
      <div className="modal-header"> 
       <h5 className="modal-title">Modal Header</h5> 
       <button type="button" className="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true" onClick={closePopUp}>&times;</span> 
       </button> 
      </div> 

      <div className="modal-body"> 
       <p> Modal Body</p> 
      </div> 

      <div className="modal-footer"> 
       <button type="button" className="btn btn-primary">Save changes</button> 
       <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={closePopUp}>Close</button> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    ); 
}; 

Answer 1

あなたはあなたのケースでは、あなたのclosePopUp()

に

$('#mypopup').modal('toggle'); 
$('#mypopup').modal('show'); 
$('#mypopup').modal('hide'); 

を使用することができます。

closePopUp(){ 
    $('#mypopup').modal('hide'); 
    } 

いけない、あなたの外側のdivにid="mypopup"を追加するのを忘れ：

<div className="modal fade" id="mypopup" tabIndex="-1" role="dialog"> 

ここhttps://jsfiddle.net/rafahoro/dsjoayrt/15/

はそれが役に立てば幸いあなたのコードに基づいてJSFiddleです。

編集/追加： モーダル法は、一般的なブートストラップモーダルが正常に動作できるようにするにはJavaScriptを使用して、ブートストラップページhttp://getbootstrap.com/javascript/#modals-methods

Answer 2

一般的なブートストラップモードでは、javascriptを使用して正常に動作します。しかし、コード化されている方法は、Reactのやり方とはまったく違う古いスタイルのDOMレンダリングです。あなたは反応のために構築されたカスタムモーダルコンポーネントを見つけなければなりません。私は現在、 "React Bootstrap"を使用しています。公式ブートストラップのソースコードから提供されているモーダルを使用しようとすると、あなたのモーダルは決して動かないでしょう。