如何防止表单过帐 <input type=submit> 点击使用React

Question

I have this in my jsx file:

<input type="submit" onClick={() => this.validateForm()} id="account-submit" value="Sign Up" />

The function validateForm gets called but after that, the default behavior of submit button posting the form is done so a reload of the page is done. How can I trigger only the onClick function and prevent the submit from happening to prevent reload?

EDIT - Added this based on answer

validateForm: function (e) {
    e.preventDefault();
}

e is undefined

Answer 1

You can use e.preventDefault() . You can change your input element as:

<input type="submit" onClick={this.validateForm} id="account-submit" value="Sign Up" />

And in the validateForm function:

validateForm = e => {
    e.preventDefault(); 
    // your code here
}

Update:

If you use the arrow function in the validateForm like my example, I believe it will work fine.

If you want to use the function(e) like your added code, you should change a few things. In your input tag:

<input type="submit" onClick={e => this.validateForm(e)} id="account-submit" value="Sign Up" />

In your validateForm function:

validateForm = function(e) {
    console.log('Hello world');
    console.log(e);
}

The code above works fine for me. You should really understand the different when you use arrow function (provide in ES6) and normal function (provide in older ES). If you don't know what the arrow function is, it's time to extend your knowledge.

Good luck and code fun!

Answer 2

I am just explaining what @delig29 just said.

When you make an <input type="submit" onClick={this.onSubmitForm} /> The onClick function for the submit type button fires an event and passes it to the onClick method which is this.onSubmitForm .

When you define this function which is going to be something like this

onSubmitForm = (e) => { // Here I am passing e(event) as a @param
  // This method call of the event **preventDefault** will
  // trigger an event which will disable the browsers default behavior 
  // to reload the page on hitting form submit 
  e.preventDefault(); 
  /**
  ** Do Whatever You Want Here With Your Code
  **/
}