Reactjs：ダブル送信を避けるためのボタンを無効にし、リクエストが完了すると応答ボタンを有効にします。

Question

フォームを送信するreactjsフォームを作成しています（フィールドデータとファイル付き）。

[送信]ボタンをクリックすると、handleFormSubmissionメソッドを呼び出すonClickイベントがトリガーされます。

このhandleFormSubmissionメソッドは、最初にボタンを無効にしてから、フォームデータを送信するXMLHttpRequestを作成します。応答が返ってくるまで少し時間がかかるかもしれませんが、それまではボタンは無効のままです。

しかし、応答が3回、成功（コード200）または失敗（コード500）になったら、[送信]ボタンを再度有効にしてユーザーが別の送信を実行できるようにします。

無効にするには、単にisFormSubmittedをtrueに設定し、それをボタンのdisabledプロパティにバインドします。どうすれば元に戻すことができますか？

handleFormSubmission() { 
    this.setState({ 
     isFormSubmitted: true 
    }); 

    // stuff... 
    let xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/some-uri, true); 
    this.setOnLoad(xhr); 
    xhr.send(formData); 
} 

setOnLoad(xhr) { 
    xhr.onload = function(){ 
     if (xhr.status == 200){ 
     // request succeeded...    
     } else if (xhr.status == 500){ 
     // request failed   
     } else { 
     // anything else.. 
     }   
    }; 
    } 

Answer 1

あなたは状態isFormSubmittedをチェックして無効にロジック提出することができます：私は最初からこれを試したことを言及するのを忘れ

handleFormSubmission() { 
    if (this.state.isFormSubmitted) return; 
    this.setState({ 
     isFormSubmitted: true 
    }); 

    // stuff... 
    let xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/some-uri, true); 
     this.setOnLoad(xhr); xhr.send(formData); 
    } 

    setOnLoad(xhr) { 
     xhr.onload = function() { 
     if (xhr.status == 200) { 
      // request succeeded...    
     } else if (xhr.status == 500) { 
      // request failed   
     } else { 
      // anything else.. 
     } 
     this.setState({ 
      isFormSubmitted: false 
     }); 
     }; 
    }