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

问题

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 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?

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

回答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...

}

来源：https://stackoverflow.com/questions/38256256/reactjs-page-refreshing-upon-onclick-handle-of-button