React.js：プログラムでフォームを送信するとonSubmitイベントが発生しません

Question

リンクをクリックした後、Reactフォームを送信します。

リンクをクリックすると、プログラムでフォームを送信する必要があります。

私の問題は：onSubmitフォームが送信された後にハンドラが起動していないことです。

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が呼び出されていないと、デフォルトの動作が実行されます。ここでは

は、コードが、私は、この目的のために作られたことを切り取らです。 これはReactJsのバグか正常な動作ですか？ onSubmitハンドラを呼び出す方法はありますか？

Answer 1

アンカータグの代わりにsubmit型の入力タグを使用する必要があります。アンカータグは送信イベントをトリガーしないためです。

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

}

Answer 2

私はこれと同じ問題があったが、それを修正することができませんでした。私が何をしたとしても、document.querySelector('form').submit()を実行するとonSubmitハンドラがトリガされませんでした。私は不可視の<input type="submit">を含めようとしましたが、それでも.submit()はそれを引き起こさないでしょう。だから私は不可視のサブミット（style="display:none"）を保持してから、その目に見えないサブミットボタンで.click()を実行するように変更しました。驚いたことにそれはdisplay:noneでさえも機能します。私はFirefoxでしかテストしませんでした。

Answer 3

現在onSubmitがリアクトSyntheticEventのトリガとネイティブフォームがイベントを提出していないにバインドされているあなた。つまり、this.refs.formToSubmit.submit();があなたのハンドラを起動していない理由が説明されています。私が知る限り、そのSyntheticEventを手動でトリガーしようとすることは、推奨された、または価値のある追求ではありません。

これを達成するための慣習的な方法は、タイプsubmitの<button>または<input>を使用するようにJSX/HTMLを構造化することです。いずれかがあなたのhandleSubmitハンドラをトリガーします。私の意見では、複雑さを軽減し、ハンドラを統合し、あなたの最高の解決策と思われます。

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

Answer 4

フォームrefは、デフォルトではあなたのためsubmitに追加のコールバックを付けることを期待してはいけません。これは、DOM要素refsのようなプログラムで設定されたものを扱うときのフレームワークの設計上の悪さです。

[form要素でインスタンス化したとき] refの未実装の内部実装に頼るのではなく、必要なすべてのイベントをインスタンス化する必要があります。

これは動作します：

は

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

実際submit必ず最後に発生する必要があります。