CODEWITHSUNDEEP
reactjsform-submit
joedotnot
joedotnot

Reputation: 5133

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

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;

Upvotes: 2

Views: 5779

Answers (2)

techgyani
techgyani

Reputation: 555

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>

Upvotes: 1

Nathan
Nathan

Reputation: 8141

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!

Upvotes: 2

Related Questions