Submit form from outside

[romanlex]

Hello. How I can submit form from outside sibling component? Example I want submit form by button from modal window

[romanlex]

Now I use Portal https://gist.github.com/romanlex/bf61fb0c3db2ef1a6c68cb07a0904da2 but I think need remote submit method (

[erikras]

Wow, look at you using <Fragment> already! 😮

Can you not pass handleSubmit to your portal component?

[romanlex]

if I remove handleSubmit my button doesnt work because buttons render to another domNode with Ract.createPortal

        <CallbackForm
          buttonPortalId={containerActionId}
          subscription={{ submitting: true, pristine: true }}
        />
        <footer
          className="divider-block__footer-actions"
          id={containerActionId}>
              // my buttons
       </footer>

[erikras]

It's not very React-y, but I wonder if you could use the DOM itself to achieve this, by calling submit()?

<form id="myForm" onSubmit={handleSubmit}> ... </form>
...
<button type="button" onClick={() => document.getElementById('myForm').submit()}>
  Submit
</button>

[codepunkt]

@romanlex it seems we ran into similar problems.

For me, calling .submit() on the form did not work & reloaded the whole app.
See this tweet for more information on how i solved it.

Maybe you can even chime in and tell me why the heck the things i did actually worked, when .submit() doesn't.

[elrumordelaluz]

Beyond this little issue, the switch from redux-form into react-final-form seems really simple.
Thanks @erikras for the great work!

Thanks @romanlex for the workaround, I am also pretty curious on why only this way works as expected.

[erikras]

Made a FAQ about this.

[romanlex]

Hello! Why I use Portal but not use document.getElementById() or submit by Closure?
Because I want use native state by react-final-form without any HOC with custom form state
I want disable button or use another function.

      <button
              className="btn btn-outline-secondary btn-block"
              type="button"
              onClick={reset}
              disabled={submitting || pristine}>
              Reset form
      </button>
      <button
              className="btn btn-primary btn-block"
              type="submit"
              onClick={handleSubmit}
              disabled={submitting}>
              Submit
       </button>

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.