Question

我在我的jsx文件中有这个：

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

函数validateForm被调用但在此之后，发布表单的提交按钮的默认行为已完成，因此重新加载页面。如何仅触发onClick函数并阻止提交以防止重新加载？

编辑 - 根据回答

添加此内容

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

未定义

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”/>中的表单发布

2 个答案: