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

Question

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

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

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

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

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

附加代码和框 link 作为评论。

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

how to reset the form and enable submit button after form submision (react-formio)?

javascript

reactjs

formio