如何防止使用 React 单击时在 <input type=submit> 中发布表单

Question

我的 jsx 文件中有这个：

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

函数 validateForm 被调用，但之后，发布表单的提交按钮的默认行为完成，因此页面重新加载完成。如何才能只触发onClick函数，防止提交发生，从而防止重载？

编辑 - 根据回答

添加了这个

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

e 未定义

Answer 1

您可以使用 e.preventDefault()。您可以将 input 元素更改为：

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

并且在 validateForm 函数中：

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

更新：

如果你像我的例子一样在validateForm中使用箭头函数，我相信它会工作得很好。

如果你想像你添加的代码一样使用 function(e)，你应该改变一些东西。在您的 input 标签中：

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

在您的 validateForm 函数中：

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

上面的代码对我来说工作正常。当你使用箭头函数（在 ES6 中提供）和普通函数（在旧版 ES 中提供）时，你应该真正理解不同之处。如果你不知道箭头函数是什么，是时候扩展你的知识了。

祝你好运和代码乐趣！

Answer 2

我只是在解释@delig29 刚才说的。

当您创建 <input type="submit" onClick={this.onSubmitForm} /> 提交类型按钮的 onClick 函数会触发一个事件并将其传递给 this.onSubmitForm.

的 onClick 方法

当你定义这个函数时，它会是这样的

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
  **/
}

如何防止使用 React 单击时在 <input type=submit> 中发布表单

How to prevent form posting in <input type=submit> on click using React

javascript

reactjs

react-jsx