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

Question

I am using the react-formio package to generate a form dynamically.

I have generated a simple login-form using this link: https://codesandbox.io/s/cra-react-formio-iy8lz

After building, it creates a JSON. Then, I generate a form using that JSON, but when I submit by form after fulfill all validation of form it always is shown in disable mode why?

How can we enable button again?? when my promise is resolved and how to reset the form after submitting it?

here is my code, codesandbox link

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

one more thing

I also added one more button

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

I also added click handler but it is not working

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

Answer 1

You can try to use the submission property of the <Form /> component.

As per docs..

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.

So in this case you can control the component in a parent component.

Here submissionData is a parent component state and the component initializes with the state from parent (Empty values initially).

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

Now, inside the onSubmit handler you can try to reset the state and force a re-render.

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

Complete code would look like below.

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

Attached codesandbox link as comment.

Answer 2

I have used a reference to the FormIO form and then used it to get to the underlying formio object to emit a resetForm event.

This is the code for the reference:

// The reference
const formComponent = useRef()

// The submit handler
const onSubmit = (e) => {
  formIOContainer.current.innerHTML = '';
  // This is the code which resets the form
  const current = formComponent.current
  current.formio.emit('resetForm')
}

// The Form IO form with the on submit event handler
return (
  <>
    <div id="formIOContainerScroller"/>
    <div id="formIOContainer" ref={formIOContainer}/>
    <Form src={targetUrl}
          onFormLoad={onFormLoad}
          options={formOptions}
          onSubmitDone={onSubmitDone}
          onSubmit={onSubmit}
          ref={formComponent}
    />
  </>
)

This code resets the form after submission and the button is enabled after submission. So you can submit multiple times. Every time you submit the form gets reset.