javascript - event.preventDefault not working in React - Stack Overflow

I've followed a tutorial & they used event.preventDefault() on the Save button & save a form into the state. I've not really written the input tags yet but so far I've added the Save button and it kinda like reloads the page which it shouldn't be doing.

Here is my page ponent:

class manageLocationPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {

        };
        this.SaveLocation = this.SaveLocation.bind(this);
    }

    ponentWillMount() {

    }

    ponentDidMount() {

    }

    SaveLocation(event) {
        event.preventDefault();
        console.log("Saved");
    }

    render() {
        return (
            <div>
                <LocationForm listingData={this.props.listingData} onSave={this.SaveLocation}/>
            </div>
        );
    }
}

My locationForm ponent:

const LocationForm = ({listingData, onSave, loading, errors}) => {
    return (
        <form>
            <h1>Add / Edit Location</h1>
            <TextInput />

        {/*Here below is where we submit out input data*/}
            <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave" onClick={onSave}/>
        </form>
    );
};

Did I miss something?

I've followed a tutorial & they used event.preventDefault() on the Save button & save a form into the state. I've not really written the input tags yet but so far I've added the Save button and it kinda like reloads the page which it shouldn't be doing.

Here is my page ponent:

class manageLocationPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {

        };
        this.SaveLocation = this.SaveLocation.bind(this);
    }

    ponentWillMount() {

    }

    ponentDidMount() {

    }

    SaveLocation(event) {
        event.preventDefault();
        console.log("Saved");
    }

    render() {
        return (
            <div>
                <LocationForm listingData={this.props.listingData} onSave={this.SaveLocation}/>
            </div>
        );
    }
}

My locationForm ponent:

const LocationForm = ({listingData, onSave, loading, errors}) => {
    return (
        <form>
            <h1>Add / Edit Location</h1>
            <TextInput />

        {/*Here below is where we submit out input data*/}
            <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave" onClick={onSave}/>
        </form>
    );
};

Did I miss something?

• javascript
• reactjs
• preventdefault

Share Improve this question Follow asked Jul 14, 2016 at 4:57 Joshua RajandiranJoshua Rajandiran 2,92877 gold badges2727 silver badges5555 bronze badges 1

• What if you use form's onSubmit instead? – zerkms Commented Jul 14, 2016 at 5:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Instead of onClick it your input.submit, you should do

const LocationForm = ({listingData, onSave, loading, errors}) => {
    return (
        <form  onSubmit={onSave}>
            <h1>Add / Edit Location</h1>
            <TextInput />

        {/*Here below is where we submit out input data*/}
            <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave"/>
        </form>
    );
};

So the event is the form submission which is being prevented.

https://facebook.github.io/react/docs/tutorial.html#submitting-the-form