Reactjs：在按钮的“onClick”句柄上刷新页面？

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()

Answer 2

The full solution for the issue of the page reloading will be:

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


handleEntailmentRequest(e){
    e.preventDefault();
    //do something...

}

Answer 3

You can prevent the default behavior as suggested by zerkms or

Just add type="button" in button tag.

Eg: this.showSomething('all')}>All

Answer 4

Yes! That did worked! If your react-app gets refreshed unexpectedly then, you should pass (e) as an event argument and then use e.preventDefault() in the function body which will prevent happen the default behavior of the onClick event.

Answer 5

After adding the attribute type="button" in React solved my issue.