Lo que estoy haciendo aquí es hacer clic en un enlace para verificar si todos los campos están completos si se completa el formulario de envío como de costumbre, de lo contrario, se mostrarán algunos errores. Pero, ¿cómo puedo continuar enviando un formulario normalmente después de usar e.preventdefault en reaccionar?
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> } }Para enviar el formulario explícitamente, debe llamar al método de submit()
Su función de verificar campos se convertiría en algo como esto.
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(); } },Llame a submit en el formulario.
e.preventDefault(); if (this.state.primaryGuestName && this.state.primaryGuestMobile) { e.target.submit(); } else { showErrors(); } }Realmente no debería consultar el dom para el formulario, en su lugar, use el evento onSubmit y un botón, entonces la implementación es mucho más clara:
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> ); } });