如何防止表單過帳 <input type=submit> 點擊使用React

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