fom在preventDefault（）之後提交時使用反應

Question

這裏所做的是點擊一個鏈接驗證是否所有字段都填充如果填充提交表單像往常一樣否則會顯示一些錯誤。但是如何在使用e.preventdefault之後繼續提交表單？

var formComponent = React.createClass({ 
verifyFields: function (e) { 
e.preventDefault(); 
    if (this.state.primaryGuestName && this.state.primaryGuestMobile) { 
     // how can i continue with form submission here(not using xhr) 
    } else { 
     showErrors(); 
    } 
}, 

render: function() { 
<form action={this.props.action} ref="booking_form" acceptCharset="UTF-8" method="post"> 
    {form contents} 
    <a href="" name="submit_details" onClick={this.verifyFields} 
          className="btn-flat btn-large rd-button">Confirm Details</a> 
</form> 
} 
} 

Answer 1

要明確提交表單，你需要調用submit()方法

你verifyFields功能將成爲這樣的事情。

verifyFields: function (e) { 
e.preventDefault(); 
    if (this.state.primaryGuestName && this.state.primaryGuestMobile) { 
     // how can i continue with form submission here(not using xhr) 
     document.getElementById('myForm').submit(); 
    } else { 
     showErrors(); 
    } 
}, 

Answer 2

致電submit表格上。

e.preventDefault(); 
    if (this.state.primaryGuestName && this.state.primaryGuestMobile) { 
     e.target.submit(); 
    } else { 
     showErrors(); 
    } 
} 

Answer 3

你真的不應該查詢DOM的形式，而是使用onSubmit事件，然後一個按鈕實現是有很多清潔：

var formComponent = React.createClass({ 
    submit: function(e) { 
     if (!this.verifyFields()) { 
      e.preventDefault(); 
      showErrors(); 
      return false; 
     } 

     // continue here.. 
     return true; 
    }, 

    verifyFields: function() { 
     return this.state.primaryGuestName && this.state.primaryGuestMobile; 
    }, 

    render: function() { 
     return (
      <form action={this.props.action} onSubmit={this.submit} acceptCharset="UTF-8" method="post"> 
       {form contents} 
       <button type="submit" className="btn-flat btn-large rd-button">Confirm Details</button> 
      </form> 
     ); 
    } 
});