React js中的Bootstrap模式不起作用 [英] The Bootstrap modal in React js is not working

问题描述

我正在关注本教程(

灰色层不会让我使用模式.我已经检查过css文件，但是我不知道我在哪里做错了.

请帮助我

这是我的代码:

Login.js

 从'react'导入React，{Component，PropTypes};类Login扩展了React.Component {使成为() {返回 (< div>< button type ="button" id ='ingresar'data-toggle ="modal" data-target =#myModal">英格萨尔</button>< div className ="modal fade" id ="myModal" tabindex =-1" role ="dialog" aria-labelledby ="myModalLabel" aria-hidden ="true">< div className ="modal-dialog">< div className ="modal-content">< div className ="modal-header">< button type ="button" className ="close" data-dismiss ="modal">< span aria-hidden ="true">& times;</span>< span className ="sr-only> Close</span></button>< h4 className ="modal-title" id ="myModalLabel">模式标题</h4></div>< div className ="modal-body">...</div>< div className ="modal-footer">< button type ="button" className ="btn btn-default" data-dismiss ="modal"> Close</button>< button type ="button" className ="btn btn-primary">保存更改</button></div></div></div></div></div>);}}  

解决方案

我有同样的问题.我发现我的问题与 fade 类有关.删除后，我的问题就解决了.

I am following this tutorial (https://www.bigbinary.com/videos/keep-up-with-reactjs/creating-a-bootstrap-modal-in-react-js)

to create a modal, but I have this problem.

A gray layer will not let me use the modal. I already checked the css file but I do not know where I am doing wrong.

Please help me

this is my code:

Login.js

import React, { Component,PropTypes } from 'react';


class Login extends React.Component {
    render() {

        return (
          <div>
  <button type="button" id='ingresar' data-toggle="modal" data-target="#myModal">
    Ingresar
  </button>

  <div className="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span className="sr-only">Close</span></button>
          <h4 className="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div className="modal-body">
          ...
        </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>
          </div>

        );
    }
}

解决方案

I have the same problem. I found out that my problem is related to the fade class. As soon as I removed it my problem was solved.

这篇关于React js中的Bootstrap模式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！