创建后立即自动提交 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

更现代的解决方案（使用 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>
  );
};