Автоматически отправлять форму ReactJS сразу после ее создания.

Question

Есть ли способ автоматической отправки формы сразу после ее создания?У меня есть компонент <ShowVideo />.Внутри этого компонента я отправляю действие, которое даст немного hidden field и signatures.После этого я отображаю эту форму на странице.То, что я хочу, это отправить эту форму динамически после того, как моя форма будет обработана.Может быть несколько форм.

Один из подходов, который мне пришёл в голову, - это вызвать другую функцию handleSubmit после тега form, в которой будет содержаться метод form.submit(), но как я могу убедиться, чтовся форма отображается или нет.

class ShowVideo extends Component {
  render() {
    let renderInputFields = null
    if (this.props.videoData.data.hasOwnProperty("signature")) {
      renderInputFields = Object.keys(launchData).map((key, i) => {
        return (<input type="hidden" name={key} key={i} value={launchData[key]} />)
      })
    }
    return (
      <div>
        <iframe width="100%" height="430px" frameBorder="0" name="videoIframe"></iframe>
        <form name="ltiLaunchForm" id="ltiLaunchForm" method="post" target="target_iframe" encType="application/x-www-form-urlencoded" action={launchUrl}>
          {renderInputFields}
          <input type="hidden" name="oauth_signature" value={signature} />
        </form>
      </div>
    )
  }
}

Answer 1

Если вы хотите автоматически отправить форму после того, как она была создана, но у формы есть некоторые ее элементы, отрисованные позже, тогда я рекомендую добавить функцию жизненного цикла componentDidUpdate, которая будет динамически запускаться после нового рендеринга.

В этой функции мы обнаружим, визуализировал ли rerender все элементы формы.Если это так, то мы можем программно инициировать отправку формы.

componentDidUpdate() {
    const formElementKey1Exists = document.getElementById("element1");
    const formElementKey2Exists = document.getElementById("element2");
    ...
    if (formElementKey1Exists  && formElementKey2Exists && ...) {
        document.getElementById('ltiLaunchForm').submit();
    }
}

Условное условие будет гарантировать, что вся форма будет обработана перед динамической отправкой.