Reactjs: page refreshing upon `onClick` handle of Button?

Question

I have the following block inside my render() (which is a Bootstrap Button: https://react-bootstrap.github.io/components.html#buttons-options):

<Button type="simpleQuery" onClick={this.handleEntailmentRequest.bind(this)}>    Query </Button> 

and the following function:

handleEntailmentRequest() {     console.log("handle request "); } 

Whenever I click on the button I can see that the "handle request" question appears in the console log, but suddenly disappears. My understanding is that something is causing the page to refresh. Any opinons where I am going wrong?

Answer 1

The default button action is to submit the form.

If you don't need that - you need to prevent that:

handleEntailmentRequest(e) {     e.preventDefault();      console.log("handle request "); } 

References:

• MDN - Event.preventDefault()