React.js: przesłanie formularza programowo nie wyzwala zdarzenia onSubmit

Question

Chcę przesłać formularz odpowiedzi po kliknięciu linku.

W tym celu należy przesłać formularz programowo po kliknięciu łącza.

Mój problem: onSubmit Handler nie jest zwolniony po przesłaniu formularza.

Oto kod snipped że zrobiłem do tego celu:

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

handleSubmit nie jest wywoływany i domyślne zachowanie jest wykonywany (formularz składany). Czy jest to błąd ReactJs lub normalne zachowanie? Czy istnieje sposób wywołania wywołania programu onSubmit?

Answer 1

Powinieneś używać tagu wejściowego z typem submit zamiast tagu kotwicy, ponieważ znacznik zakotwiczenia nie uruchamia zdarzenia submit.

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

}

Answer 2

miałem ten sam problem, ale nie mógł go naprawić. Niezależnie od tego, co zrobiłem, wykonanie document.querySelector('form').submit() nie uruchomiłoby obsługi onSubmit. Próbowałem włączyć niewidoczny <input type="submit">, ale nadal .submit() nie wyzwoliłby go. Więc po prostu zmieniłem zachowanie niewidocznej przesyłki (style="display:none"), a następnie robiąc .click() na tym niewidocznym przycisku przesyłania, zadziwiająco działa nawet z display:none. Testowałem jednak tylko w Firefoksie.

Answer 3

Twój bieżący numer jest powiązany z wyzwalaniem zdarzenia SyntheticEvent, a nie natywnego wysłania formularza. To wyjaśnia, dlaczego this.refs.formToSubmit.submit(); nie uruchamia twojego programu obsługi. O ile mi wiadomo, próba ręcznego uruchomienia tego SyntheticEvent nie jest zalecana ani warta zachodu.

Wierzę, że idiomatycznym sposobem osiągnięcia tego jest uporządkowanie JSX/HTML w celu użycia typu <button> lub <input> typu "submit". Każda z nich wyzwoli Twój uchwyt handleSubmit. Moim zdaniem zmniejszy to złożoność, skonsoliduje obsługę i wydaje się być najlepszym rozwiązaniem.

np.

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

Answer 4

Nie należy oczekiwać formą ref aby dołączyć dodatkowy oddzwanianie do submit dla Ciebie domyślnie. Byłby to zły projekt ramowy podczas pracy z programowo ustawionymi elementami, takimi jak DOM DOM refs.

Należy użyć ref do wystąpienia wszystkich zdarzeń, które trzeba w dowolnej kolejności chcesz zamiast opierania się na niewypowiedziane wewnętrznej realizacji ref [gdy instancja przez element form].

to działa:

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

Rzeczywista submit powinna zawsze występować jako ostatni.