React - Modal display black screen

Asked

Viewed 326 times

1

all right ?

I have a problem of displaying a modal in a Komponent React, it happens that when we click to present the modal display the screen turns dark and ends up crashing the browser inserir a descrição da imagem aqui

In the code I have the following excerpts:

Menu responsible for calling the modal:

<li><button type="button" onClick={this.showModal}>Import File</button></li>

Function:

showModal = () => { this.refs.modal.show() }

Part of the component:

<Modal className="swagger-ui modal" ref="modal">
          <div className="container">
            <h2>Upload file</h2>
            <input type="file" ref="fileLoadInput"></input>
          </div>
          <div className="right">
            <button className="btn cancel" onClick={this.hideModal}>Cancel</button>
            <button className="btn" onClick={this.importFromFile}>Open file</button>
          </div>
        </Modal>

I can’t figure out what’s causing the problem ?

  • Crashes the browser or just shows that dark screen?

  • I believe that the action of the screen going dark as I showed in the image is a normal behavior of modal css, the point is that it totally locks the browser and does not open the content of the modal.

  • Locks the browser to the point where it has to close and open again?

  • It locks the nagevador, but if I give a refresh the execution of the page back to work, but it does not open the modal... the problem happens only when it is requested to open the modal by the menu link

  • Try putting a z-index: 9999; in modal.

  • It does not work... The problem seems to be related to the import of a certain Komponent, if I remove the import from it, everything comes back to work... it makes some sense ?

  • ixi, I can’t tell because I don’t understand Act.

  • Try debugging through the browser, put a breakpoint exactly at the time you click on the button that calls this.showModal and see if you can get to the point that it stops.

Show 3 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.