Why e.preventDefault() does not work in React? - reactjs

Question

Basic code below, yet the form submits and reloads. Why?
import React from 'react';
class TestSubmitComponent extends React.Component {
constructor(props) {
super(props);
}
formSubmitHandler = (e) => {
e.preventDefault(); //should prevent submit, and continue below?
console.log(e);
console.log('hello world ! why this does NOT show in console?!')
return false;
}
render() {
return(
<form method="POST" action="/">
<div onSubmit={this.formSubmitHandler}>
<h1>Select a file to upload</h1>
<input type="file" accept=".txt" name="ctlFileInput"></input>
<p/>
<input type="submit" value="Click to submit" />
</div>
</form>
)
}
}
export default TestSubmitComponent;

Answer 1

Your formSubmitHandler() method isn't actually triggered so the default behavior of a page refresh is occurring on each form submission since the onSubmit() callback needs to be tied to your form element:
<form onSubmit={this.formSubmitHandler}>
Additionally, I would remove the POST request to the / route on your server. This is defined within your form element but this isn't desired since this will make a call to your server, instead of trigger your formSubmitHandler() method. Maybe you could try something along the lines of:
import React from 'react';
class TestSubmitComponent extends React.Component {
constructor(props) {
super(props);
}
formSubmitHandler = (e) => {
e.preventDefault(); //should prevent submit, and continue below?
console.log(e);
console.log('hello world ! why this does NOT show in console?!')
return false;
}
render() {
return(
<form onSubmit={this.formSubmitHandler}>
<div>
<h1>Select a file to upload</h1>
<input type="file" accept=".txt" name="ctlFileInput"></input>
<p/>
<input type="submit" value="Click to submit" />
</div>
</form>
)
}
}
export default TestSubmitComponent;
Hopefully that helps!

Answer 2

onSubmit is written as the attribute of the div element after form therefore it was not working as expected. Page is loading after form submit because form's submit event was uncontrolled.
If you will move it to the form element then it will work.
Example
<form method="POST" action="/" onSubmit={this.formSubmitHandler}>
<div>
<h1>Select a file to upload</h1>
<input type="file" accept=".txt" name="ctlFileInput"></input>
<p/>
<input type="submit" value="Click to submit" />
</div>
</form>