Question

我正在创建一个提交表单的reactjs表单（包含字段数据和文件）。

单击“提交”按钮时，它会触发调用某种onClick方法的handleFormSubmission事件。

此handleFormSubmission方法首先禁用该按钮，然后创建一个发送表单数据的XMLHttpRequest。回复可能需要一些时间，直到那时按钮仍然处于禁用状态。

但是一旦响应是theree，无论是成功（代码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
        });
      };
    }

Reactjs：禁用按钮以避免双重提交，然后在请求完成后启用按钮（收到响应）

1 个答案: