fom submit nach preventDefault() bei der Verwendung von react

Question

Was passiert hier ist, klicken Sie auf einen Link überprüfen Sie, ob alle Felder ausgefüllt sind, wenn ausgefüllt Formular wie sonst senden wird sonst einige Fehler angezeigt werden. Aber wie kann ich ein Formular normal weiterleiten, nachdem ich e.preventdefault im Reagieren benutzt habe?

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

das Formular abzuschicken explizit müssen Sie

Ihre verifyFields Funktion so etwas werden würde, die submit() Methode aufrufen.

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

Anruf submit auf dem Formular.

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

Answer 3

Sie soll nicht wirklich den dom für das Formular abfragen, verwenden Sie stattdessen das onSubmit Ereignis und eine Schaltfläche dann die Umsetzung ist viel sauberer:

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> 
     ); 
    } 
});