2016-06-18 19 views
8

Desidero inviare un modulo di React dopo un clic su un collegamento.React.js: il modulo di invio non si avvia programmaticamente su evento di invio

Per fare ciò devo inviare il modulo al livello di programmazione se si fa clic sul collegamento.

il mio problema è: onSubmit il gestore non viene licenziato dopo il modulo di invio.

Ecco un codice snipped che ho fatto per questo scopo:

var MyForm = React.createClass({ 
    handleSubmit: function(e){ 
    console.log('Form submited'); 
    e.preventDefault(); 
    }, 
    submitForm : function(e){ 
    this.refs.formToSubmit.submit(); 
    }, 
    render: function() { 
    return (
    <form ref="formToSubmit" onSubmit={this.handleSubmit}> 
    <input name='myInput'/> 
    <a onClick={this.submitForm}>Validate</a> 
    </form>); 
    } 
}); 

ReactDOM.render(
    <MyForm name="World" />, 
    document.getElementById('container') 
); 

Il handleSubmit non viene richiamato e il comportamento di default viene eseguita (il modulo venga presentata). Si tratta di un errore ReactJs o di un comportamento normale? C'è un modo per richiamare il gestore onSubmit?

+0

Hai trovato una soluzione a questo? Sto avendo lo stesso problema. – Noitidart

risposta

-1

Si dovrebbe utilizzare il tag di input con tipo submit anziché tag di ancoraggio, poiché il tag di ancoraggio non attiva un evento di invio.

render: function() { 
return (<form ref="formToSubmit" onSubmit={this.handleSubmit}> 
    <input name='myInput'/> 
    <input onClick={this.submitForm} type="submit" value="Validate" /> 
</form>); 

}

+4

L'utilizzo di un tag di input per inviare il modulo non "lo invia programmaticamente". – Gunchars

-1

Ho avuto questo stesso problema, ma non sono riuscito a risolvere il problema. Non importa cosa ho fatto, fare document.querySelector('form').submit() non attiverebbe il gestore onSubmit. Ho provato a includere un invisibile <input type="submit">, ma comunque lo .submit() non lo attivava. Così ho appena cambiato per mantenere l'invisibile submit (style="display:none") e poi facendo .click() su quel pulsante di invio invisibile, sorprendentemente funziona anche con display:none. Ho provato solo in Firefox però.

1

Il tuo attuale onSubmit è destinato a l'innesco di un Reagire SyntheticEvent e non la forma nativa presentare evento. Questo spiega perché this.refs.formToSubmit.submit(); non sta attivando il gestore. Per quanto ne so, provare a triggerare manualmente che SyntheticEvent non è una ricerca consigliata o utile.

Credo che il modo idiomatico per ottenere ciò sia di strutturare JSX/HTML per utilizzare un <button> o <input> di tipo submit. Ognuno di questi attiverà il tuo gestore handleSubmit. A mio avviso, ridurrà la complessità, consoliderà i gestori e sembrerà la soluzione migliore.

ad es.

  • <input type="submit" value="Validate" />
  • <button type="submit">Validate</button>
+0

Questa è una delle mie principali lamentele su React. Esegue una struttura idiomatica rigorosa e ingenuamente non realistica. Se si sta semplicemente inviando un contatto o un modulo di registrazione, certo, ha perfettamente senso farlo con un clic del mouse. Ma le applicazioni più complicate potrebbero, per esempio, salvare automaticamente una forma complessa ogni volta che un input è sfocato, o un'opzione è selezionata, e Redux e React sembrano accoppiarsi molto bene per impedirti di farlo senza una soluzione alternativa. – CGriffin

0

Non si deve aspettare una forma ref di allegare un callback supplementare per submit per voi per impostazione predefinita. Questo sarebbe un cattivo design del framework quando si lavora con elementi programmati come l'elemento DOM refs.

È consigliabile utilizzare il ref per istanziare tutti gli eventi che avete bisogno in qualsiasi ordine che si desidera, invece di basarsi su un'implementazione interna incalcolabile di un ref [quando un'istanza da un elemento form].

Questo funziona:

this.refs.formToSubmit.onSubmit(); 
this.refs.formToSubmit.submit(); 

Actual submit dovrebbe sempre avvenire scorso.

Problemi correlati