javascript - 如何在提交表单后重置表单并启用提交按钮(react-formio)？

Question

我正在使用 react-formio包动态生成表单。

我使用此链接生成了一个简单的登录表单:https://codesandbox.io/s/cra-react-formio-iy8lz

构建后，它会创建一个 JSON。然后，我使用该 JSON 生成一个表单，但是当我在 fulfill all validation of form 之后通过表单提交时，它总是显示在 disable mode 为什么？

我们怎样才能再次启用按钮？？当我的 promise 被 resolved 以及如何在提交后重置表单？

这是我的代码，codesandbox link

onSubmit={i => {
  alert(JSON.stringify(i.data));
  var promise1 = new Promise(function(resolve, reject) {
     setTimeout(function() {
        resolve("foo");
      }, 300);
   });
 }

还有一件事

我还添加了一个按钮

{
   label: "Click",
   action: "event",
   showValidations: false,
   block: true,
   key: "click",
   type: "button",
   input: true,
   event: "clickEvent"
},

我还添加了点击处理程序，但它不起作用

clickEvent={() => {
  alert("--ss");
}}

Answer 1

你可以尝试使用<Form />的submission属性组件。

根据文档..

Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.

所以在这种情况下，您可以在父组件中控制组件。

在这里submissionData是父组件状态，组件使用来自父组件的状态进行初始化(最初为空值)。

<Form submission={{ data: submissionData }} />

现在，在 onSubmit 中处理程序，您可以尝试重置状态并强制重新渲染。

    onSubmit={() => {
         // Reset submission data
          setSubmissionData({});
        };
      }

完整的代码如下所示。

export default () => {
  const [submissionData, setSubmissionData] = useState({});
  return (
    <Form
      //all form props
      submission={{ data: submissionData }}
      onSubmit={() => {
        var promise1 = new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve("foo");
          }, 300);
        });

        promise1.then(function(value) {
          alert(value);
         // Reset submission data
          setSubmissionData({});
        });
      }}
    />
  }

附加的codesandbox链接作为评论。