javascript - 如何使用 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 中提供)时，你应该真正理解不同之处。如果您不知道箭头函数是什么，那么是时候扩展您的知识了。

祝你好运，享受编码乐趣!