反應onSubmit事件不起作用

當我在窗體中輸入時，它不會觸發onSubmit事件。沒有錯誤。另一件事，onBlur，確實派遣。 logForm函數最終將console.log一個包含所有表單字段的JSON字符串，但我還沒有得到那麼多。我只是試圖觸發窗體上的onSubmit事件。任何幫助或解釋將不勝感激。下面的代碼：反應onSubmit事件不起作用

import React from 'react' 

export default function SignupForm() { 
    return (
    <form onSubmit={logForm}> 
     <div className="form-group"> 
     <label> 
      Name: 
      <input onBlur={logUpdate} className="form-control" 
      type="text" placeholder="Username"/> 
     </label> 
     </div> 
     <div className="form-group"> 
     <label> 
      Email: 
      <input onBlur={logUpdate} className="form-control" 
      type="text" placeholder="[email protected]"/> 
     </label> 
     </div> 
     <div className="form-group"> 
     <label> 
      Password: 
      <input onBlur={logUpdate} className="form-control" 
      type="password" placeholder="Password"/> 
     </label> 
     </div> 
     <div className="form-group"> 
     <label> 
      Confirm Password: 
      <input onBlur={logUpdate} className="form-control" 
      type="password" placeholder="Password"/> 
     </label> 
     </div> 
    </form> 
) 
} 

function logForm(e) { 
    e.preventDefault() 
    const formInfo = new FormData(e.target) 
    console.log(formInfo) 
} 

function logUpdate(e) { 
    console.log(e.target.value) 
}

來源

2017-07-28 Nic Bonetto

你的形式不具有一個按鈕，所以它不會提交表單 – TryingToImprove

我想的onsubmit的作品當你點擊「確定」鍵？ –

默認情況下，回車鍵不提交。正如@TryingToImprove寫道，嘗試在表單底部添加一個按鈕，這也可以做到這一點。 – Tikkes

你可以做的是把一個onKeyPressed事件對你的表單控件，像這樣

onKeyPress={this.onKeyPressed}

，然後有一個功能捕捉onKeyPressed

onKeyPressed: function (e) { 
    if (e.key === "Enter") { 
     logForm(e); 
    } 
}

如果你想Submit工作，添加一個按鈕到你的html部分：（C REDIT到@TryingToImprove）

<div className="form-group"> 
    <label> 
     <button className="btn btn-default" type="submit">submit form</button> 
    </label> 
    </div>

來源

2017-07-28 05:51:09 Tikkes

感謝您的快速響應！但我必須使用onSubmit。 –

@Tikkes當你添加註釋「在底部包含一個按鈕」到你的答案它將包含這個問題的完整解決方案:) – Philipp

感謝信用:)但是'type =「submit」'而不是'onClick = {logForm}'用於獲取'

反應onSubmit事件不起作用

回答

相關問題