呈現在模態時，不顯示在陣營組件

我試圖做：當我寫的用反應，終極版的一個項目，我想從RecordTaskPopUp組件彈出一個模式時的狀態ManageTimerisTimeOut組件由定時器事件改變（爲了便於閱讀，我在以下代碼中直接將isTimeOut定義爲true）。呈現在模態時，不顯示在陣營組件

問題：模態沒有顯示在頁面上。

我做了什麼，以發現問題：

我在我的CSS文件中更改.modal {display: block}但它仍然沒有顯示在頁面上。
我也嘗試在我的RecordTskPopUp組件上渲染除模態之外的其他東西，它工作得很好。所以我想這個問題與模態本身有關。
從引導文檔中粘貼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> 
    ); 
};

來源

2017-07-04 Liutong Chen

記載通用引導模式使用JavaScript能夠正常工作。然而，它被編碼的方式是dom渲染的老式方式，與React的方式完全不同。你將不得不找到一個爲反應而構建的自定義模態組件。我目前使用「React Bootstrap」。如果您試圖使用官方Bootstrap源代碼提供的模式，那麼您的模式永遠不會起作用。 –

但是爲什麼當我使用像「btn」或「navbar」這樣的引導類時，它們工作得很好。難道像「模態」這樣最複雜的組件都需要一個自定義的反應組件來使用它嗎？ –

對於初學者來說，這是令人困惑的部分。我也一直在這條路上。你可以使用這些類的原因是因爲它們專門與css類相關。 CSS工作得很好，但是當你需要一些需要javascript的功能時，你必須保留舊的bootstrap javascript方法來做後面的事情。 –

您可以使用

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

在

您closePopUp()

你的情況：

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

不要忘記添加id="mypopup"到您的外格：

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

這是一個基於你的代碼的JSFiddle https://jsfiddle.net/rafahoro/dsjoayrt/15/

希望它有幫助。

編輯/添加：模態方法在引導頁面http://getbootstrap.com/javascript/#modals-methods

來源

2017-07-04 04:12:00 rafahoro

謝謝！這很好地解決了我的問題！我可以知道這個原因嗎？ –

我很高興它解決了你的問題。編輯答案鏈接到文檔 – rafahoro

感謝您的詳細解釋！ –

通用引導程序模式使用JavaScript才能正常工作。然而，它被編碼的方式是dom渲染的老式方式，與React的方式完全不同。你將不得不找到一個爲反應而構建的自定義模態組件。我目前使用「React Bootstrap」。如果您試圖使用官方Bootstrap源代碼提供的模式，那麼您的模式永遠不會起作用。

來源

2017-07-04 01:38:23

呈現在模態時，不顯示在陣營組件

回答

相關問題