CODEWITHSUNDEEP
formsreactjs
tobik
tobik

Reputation: 7198

onSubmit event is not fired in React.js form

My React based app contains a form and somewhere along the way it stopped working, the onSubmit even was no longer fired and the form was just simply submitted with a new http request. While trying to isolate the problem I stripped my whole app to the following snippet (which is actually this jsfiddle taken from another question):

import React from 'react'

var OnSubmitTest = React.createClass({
    render: function () {
        var doSomething = function () {
            alert('it works!');
        }

        return <form onSubmit={doSomething}>
            <button>Click me</button>
        </form>;
    }
});

React.render(<OnSubmitTest/>, document.body);

The script on jsfiddle works as it should: the message is alerted just before the form is actually submitted. I get no alert in my app, though. If I add e.preventDefault() the jsfiddle form is not submitted at all, my form is.

The difference is that I build my app using webpack and babel from es6 but it's hard to believe that this could have any impact on this matter.

Any idea what might be the reason? What should I try next to debug that?

Update: JSFiddle showing the problem. The linked file is the webpack output (not uglified in any way to keep it readable, that's why it's so huge). You can find my code (compiled) starting on the line 53.

Upvotes: 1

Views: 972

Answers (1)

tobik
tobik

Reputation: 7198

Mystery solved: I forgot to mark the node_modules directory as excluded (I use IntelliJ IDEA) so when I used refactoring to change some variable name form to something else, the IDE eagerly refactored the whole React and replaced all occurrences of form with the new value.

I fixed it by reinstalling all npm dependencies.

Upvotes: 1

Related Questions