Dan Rubio Dan Rubio - 16 days ago 6
React JSX Question

Getting an event.preventDefault(); is not a function. Why is it not a function?

I am working with react and following a handful of tutorials for Form submission where I run into this problem in my console:

contact.js:67 Uncaught TypeError: event.preventDefault is not a function(…)


Here is my code:

contact.js

class ContactForm extends Component {


constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = { open: false };
}

handleSubmit(event) {
console.log('hello');
event.preventDefault();
}

handleTouchTap = () => {
this.setState({ open: true });
}

handleRequestClose = () => {
this.setState({ open: false });
}

render() {
return(
<div>
<Paper className="Form" zDepth={2}>
<Formsy.Form onSubmit={this.handleSubmit}>
<FormsyText
name="Enter Name"
floatingLabelText="Enter your name"
/>
<FormsyText
name="Enter email address"
floatingLabelText="Enter your email address"
/>
<FormsyText
name="message"
floatingLabelText="What can I do for you?"
/>
<RaisedButton onTouchTap={this.handleTouchTap}
type="submit"
label="Submit your message"
primary={true}
/>
<Snackbar
open={this.state.open}
message="Thank your for submitting your message. I'll get back to you as soon as I can!"
autoHideDuration={2000}
onRequestClose={this.handleRequestClose}
/>
</Formsy.Form>
</Paper>
</div>
);
}
}

export { ContactForm };


As you can see in my code and from what I can tell, I've properly bound
handleSubmit
to my
ContactForm
and should be calling it correctly on the
onSubmit
handler with
this.handleSubmit
. What could I be missing here?

Answer

Your are not using a default form...

It's Formsy

From the docs

https://github.com/christianalfoni/formsy-react/blob/master/API.md#onsubmit

onSubmit(data, resetForm, invalidateForm)

Takes a function to run when the submit button has been clicked.

The first argument is the data of the form. The second argument will reset the form. The third argument will invalidate the form by taking an object that maps to inputs. This is useful for server side validation. E.g. {email: "This email is taken"}. Resetting or invalidating the form will cause setState to run on the form element component.