Отключите кнопку отправки, пока ответ от сервера не будет получен в реакции-окончательной форме

Question

Можно ли отключить кнопку отправки с помощью <button disabled={submitting}> в реакции-окончательной форме до получения ответа от сервера?Для ответа сервера требуется около 6 секунд.Но кнопка отключается менее чем на секунду.Вот моя функция отправки:

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
  await sleep(100)
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "https:...", true) ;
  xhr.setRequestHeader("Content-Type", "application/json");
  let data = {...}
  xhr.send(JSON.stringify(data));
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        let result = JSON.parse(xhr.responseText);
        if (result.status === "OK") {
          window.location = result.pdf
        };
      }
    }
  };
}

Можно ли установить submitting в true, пока я не получу result.status === "OK"?

Answer 1

Основываясь на первом редактировании ответа выше, я получил следующий код:

import React from 'react';
import { Form, Field } from "react-final-form";

type State = {
  submitting: boolean;
}

type Props = {}

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const initialValues = {};

class MyForm extends React.Component<Props, State> {
  state = {
    submitting: false,
  }

  onSubmit = async values => {
    this.setState({
      submitting: true
    })
    await sleep(100)
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://...", true) ;
    xhr.setRequestHeader("Content-Type", "application/json");
    let data = {...}
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let result = JSON.parse(xhr.responseText);
          if (result.status === "OK") {
            window.location = result.pdf
            this.setState({
              submitting: false
            })
          };
        }
      }
    }
  }

  render() {
    return (
      <Form
        onSubmit={this.onSubmit}
        initialValues={initialValues}
        render={({ handleSubmit, form, invalid, errors, values }) => (
          <form onSubmit={handleSubmit}>
            ...
            <button type="submit" disabled={this.state.submitting}>
                  {this.state.submitting ? 'Downloading': 'Send'}
                </button>
          </form>
        )}
      />
    );
  }
}

export default MyForm;

Я приму предыдущий ответ, но буду признателен, если вы исправите ошибки в моем кодев комментариях.

Answer 2

Вы можете сделать это, однако вам нужно переместить отправку в состояние.См. Пример ниже

<code>import React from 'react'
import { render } from 'react-dom'
import { createForm } from 'final-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
  await sleep(300)
  window.alert(JSON.stringify(values, 0, 2))
}

class Form extends React.Component {
  constructor() {
    super()
    const initialState = {}
    let inConstructor = true
    this.form = createForm({ onSubmit })

    // subscribe to form changes
    this.unsubscribe = this.form.subscribe(
      formState => {
        // cannot call setState in constructor, but need to on subsequent notifications
        if (inConstructor) {
          initialState.formState = formState
        } else {
          this.setState({ formState })
        }
      },
      { submitting: true}
    )
    this.state = initialState
    inConstructor = false
  }

  componentWillUnmount() {
    this.unsubscribe()
    this.unsubscribeFields.forEach(unsubscribe => unsubscribe())
  }

  handleSubmit = event => {
    event.preventDefault()
    this.form.submit()
  }

  render() {
    const { formState} = this.state
    return (
        <form onSubmit={this.handleSubmit}>
          <div className="buttons">
            <button type="submit" disabled={formState.submitting}>
              Submit
            </button>
          </div>
          <pre>{JSON.stringify(this.state, 0, 2)}

)}} render (, document.getElementById ('root'))