0

I am using Reactjs. When I press a button in a Popup the system rerenders the page and sends the application from the address "http://localhost:8080/Quiz?token=5db9d96d30000093335ee67c" to "http://localhost:8080/Quiz?", even though I have not given any command for it to happen.

It happens when I use the "onclick" tag or even if I do not use it. in fact, I have noticed that when I use the onClick tag biding a function to the button, the function is not even called.

I have a popup that is defined by the following code to render the popup:

render() {  

    return (  

    <div className='popup'>  
    <div className='popup\_inner'> 
      <div className="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <Form>
          <FormGroup>
            <textarea className="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            <Input type="text" onChange={e => this.answer = e.target.value} placeholder="Insira a resposta" />
          </FormGroup>
          <FormGroup>
          <div id="center-button"><button className="btn btn-primary">Send</button></div>
          </FormGroup>
          <div id="center-button"><button onClick={this.props.closePopup} className="btn btn-primary">Close</button></div>
        </Form>
      </div>
    </div>
    </div> 
    )

The CSS that defines the popup:

.popup {  
    overflow: hidden;
    position: fixed;
    overflow-y: auto;  
    width: 40%;
    min-width: 400px;  
    height: 100%;  
    top: 0;  
    left: auto;  
    right: auto;  
    bottom: 0;  
    margin: auto;  
    background-color: rgba(255,255,255, 0.95);  
  }  
  .popup\_inner {  
    position: absolute; 
    left: 25%;  
    right: 25%;  
    top: 25%;  
    bottom: 25%;  
    margin: auto;  
    border-radius: 20px;  
    background: white;  
  }

The problem happens when I press the "send" button. When I press the "Close" button, the popup closes properly.

Siqueira
  • 423
  • 1
  • 7
  • 29
  • 2
    The button is calling form submit, have you tried `event.preventDefault()` in your click handler? – Agney Nov 08 '19 at 02:57
  • It worked, but I have another problem now: https://stackoverflow.com/questions/58760906/reactjs-i-am-trying-to-handle-and-event-in-a-popup-but-the-popup-is-not-being – Siqueira Nov 08 '19 at 05:32
  • Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) – Agney Nov 08 '19 at 06:13
  • Yes. It did solve the problem. – Siqueira Nov 08 '19 at 11:36

0 Answers0