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生命周期函数，该函数将在重新提交新表单后动态触发。

在此函数中，我们将检测重新渲染是否已渲染所有表单元素。如果是这样，那么我们可以以编程方式触发表单提交。

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

条件将确保在动态提交之前呈现整个表单。

Answer 2

更现代的解决方案（使用React Hooks）看起来像：

import React, { useEffect, useRef } from "react";

const AutoSubmitForm = ({
  actionUrl,
  params
}) => {
  const formRef = useRef(null);
  useEffect(() => {
    formRef.current.submit();
  }, []);

  return (
    <form ref={formRef} method="POST" action={actionUrl}>
      {Object.keys(params).map(name => (
        <input
          type="hidden"
          name={name}
          value={params[name]}
        ></input>
      ))}
    </form>
  );
};

创建后立即自动提交ReactJS表单

2 个答案: