Submit Form using Button in Parent Component in React

Question

So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. H

Answer 1

What does your makeActivityInfoUpdateHandler function look like?

I assume you did it by the following way, and just continue adding more code to make it work for you:

1/ Add ref to your Form, then you can access the Form in the parent (Modal):

2/ Then in the makeActivityInfoUpdateHandler function:

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.refs.activityForm.getWrappedInstance().submit();
    // ...

}

The above code is the way you should do, please post here some more details in case this doesn't work yet!

=========== EDITED VERSION BELOW: (after discussion with the author, and we together found a good way around!):

The idea now is put the ref on a button (this button has type="submit", and it belongs to the form), then when the button outside is clicked, we just need to call the "click()" function of the ref button [which is a smart thinking from the author himself]

(Actually, component from semantic-ui is a modified and improved version, no longer the standard form, so my previous way above may not work when it tries to submit the form, however, the below way will work)

The code will now look like:

1/ Add ref to the button on the form:

     { this.activityFormButton = button } } >Submit

2/ Then in the makeActivityInfoUpdateHandler function, trigger click() of the above button:

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.activityFormButton.click();
    // ...

}