Question

38

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

rated 0 times [ 45] [ 7] / answers: 1 / hits: 78572 / 8 Years ago, thu, july 7, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emerald

Add To Favorites

Follow

Total Points: 547

Total Questions: 96

Total Answers: 122

Location: Oman

Member since Fri, Dec 23, 2022

1 Year ago

answered 8 Years ago amari · Accepted Answer

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