呈现在模态时，不显示在阵营组件

我试图做：当我写的用反应，终极版的一个项目，我想从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

呈现在模态时，不显示在阵营组件

回答

相关问题