表单细分后（react-formio）如何重置表单并启用提交按钮？

Question

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

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

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

我们如何再次启用按钮？当我promise is resolved提交表单后，如何重置表单？

这是我的代码，codesandbox链接

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

还有一件事

我还加了 one more button

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

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

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

Answer 1

您可以尝试使用组件的 Submit 属性<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链接作为注释。