javascript - Getting an event.preventDefault(); is not a function. Why is it not a function? - Stack Overflow

admin管理员组

文章数量:1401673

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?

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?

• javascript
• reactjs

Share Improve this question Follow asked Nov 21, 2016 at 16:14 Dan RubioDan Rubio 4,9471111 gold badges5656 silver badges115115 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your are not using a default form...

It's Formsy

From the docs

https://github./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 ponent.

Formsy passes the form data as first parameter into the submit event handler. This form data does not have a function preventDefault().

If you refer to the internal implementation of the submit mechanism, you will see that preventDefault() is always called by default:

submit: function (event) {

  event && event.preventDefault();

  // Trigger form as not pristine.
  // If any inputs have not been touched yet this will make them dirty
  // so validation bees visible (if based on isPristine)
  this.setFormPristine(false);
  var model = this.getModel();
  this.props.onSubmit(model, this.resetModel, this.updateInputsWithError);
  this.state.isValid ? this.props.onValidSubmit(model, this.resetModel, this.updateInputsWithError) : this.props.onInvalidSubmit(model, this.resetModel, this.updateInputsWithError);

},

Source

本文标签： javascriptGetting an eventpreventDefault() is not a function Why is it not a functionStack Overflow