表单提交后如何重置表单并启用提交按钮（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 link

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

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

根据文档..

提交数据以填写表格。您可以加载以前的 提交或使用一些预先填写的数据创建提交。如果你这样做 不提供提交表单将初始化一个空提交 使用表单中的默认值。

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

这里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({});
        });
      }}
    />
  }

附加代码和框链接作为评论。