Question

我尝试做什么：当我使用React和Redux编写项目时，我希望在RecordTaskPopUp组件中弹出一个模态isTimeOut组件的状态ManageTimer由计时器事件更改（出于可读性目的，我在以下代码中直接将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>
   );
};

Answer 1

通用引导模式使用javascript才能正常工作。然而，它的编码方式是较旧的dom渲染方式，这与React的方式完全不同。您将不得不找到为响应而构建的自定义模态组件。我目前使用＆＃34; React Bootstrap＆＃34;。如果您尝试使用官方Bootstrap源代码提供的模态，那么您的模态永远不会起作用。

Answer 2

您可以使用

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

在closePopUp()

中

在你的情况下：

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

别忘了将id="mypopup"添加到您的外部div：

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

这是一个基于您的代码https://jsfiddle.net/rafahoro/dsjoayrt/15/

的JSFiddle

希望它有所帮助。

编辑/添加的：模态方法记录在引导页面http://getbootstrap.com/javascript/#modals-methods

中

在React组件中呈现时，模态未显示

2 个答案: