My usecase is of following.
I have some React component looking like that:
var MyComponent = React.createClass({
handleButton() {
$.ajax..... post {this.state.inputData} to server
error: console.log(url,error)
},
handleInputOnChange(event) {
this.setState({inputData: event.target.value});
},
render: function () {
return (
<form>
<input type="text" id="input1" onChange={this.handleInputOnChange}/>
<button>apply</button>
</form>
)
}
});
error, ""
localhost:8080?input1=
html
submit
ajax
POST
<form>
<form>
<div>
<form>
If you are handling the request via ajax, you should prevent the default behaviour of the button click, meaning the form won't get submitted automatically.
So inside handleButton
you would get the event object and call preventDefault
:
handleButton(event) {
event.preventDefault()
$.ajax..... post {this.state.inputData} to server
error: console.log(url,error)
}
This should stop a page refresh.