last day (14 days later) » 

6:43 AM
1
A: Submit Form using Button in Parent Component in React

thinhvo0108What 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): <Modal> <Modal.Content> <ActivityInf...

 
Rui
That function is really just a skeleton function awaiting to be filled.
 
Right, please tell me if you have further problems
 
Rui
will let you know
that does not seem to be working, does not give me any errors either, they <Form> is actually a component in Semantic UI React can be found here react.semantic-ui.com/collections/form#form-example-form
 
Seems so..actually I guess Semantic UI React handle their form differently, I will try another way and update the previous answer shortly, please hold on
However, which action will be executed when the form is submitted? Do you have handleSubmit() function for your Form component? If yes, can you console.log and see some values in your submitted form?
Could you show me your form component's code ?
 
Rui
makeActivityInfoUpdateHandler (activityId) {
let close = this.props.onClose
return function () {
close()

//TODO: fire an action to submit the form
this.activityForm.click()
}
};

handleSubmit (event) {
alert('form is submitted')
event.preventDefault()
}

render () {
return (
<Modal open={this.props.open} onClose={ this.props.onClose } size="small" dimmer={'blurring'}>
<Modal.Header> Edit Activity {this.props.name } </Modal.Header>
<Modal.Content>
<Form onSubmit={ this.handleSubmit}>
<Form.Group widths='equal'>
Sorry I don't know how to post code here
here is a better version
I actually created handlesubmit and alert a message, the button included in the form works as intended but not the outside one
I figured it out
It is my curry function
 
7:01 AM
OK, I am trying to read your code...
 
Rui
Actually the problem didn't get solve :(
my bad
 
OK, found it
please just add this line into your constructor:
"this.makeActivityInfoUpdateHandler = this.makeActivityInfoUpdateHandler.bind(this); "

Then the constructor will look like this

constructor(props) {
super(props);
this.makeActivityInfoUpdateHandler = this.makeActivityInfoUpdateHandler.bind(this);
}
 
Rui
thanks
 
using console.log() is better
instead of alert('form is submitted') ^^
 
Rui
I found another problem, I cannot call submit() and click() on custom Button and Form components
if there a way to hack it?
Currently I am able to make that Semantic Button the html raw button and hide it using css
 
7:10 AM
really..let me see..
OK please just try
<Button positive content='Submit' onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} />
the following line is wrong:

<Button type='submit' ref={ (form) => { this.activityForm = form } }>Submit</Button>
please move the "ref" part into <Form>
like this:
 
Rui
I tried but I have to put ref={ (form) => { this.activityForm = form } or ref={ (button) => { this.activityButton = button } in a raw html tag
it works in that way
 
<Form onSubmit={ this.handleSubmit} ref={ (form) => { this.activityForm = form } }>
You can do whatever way which works ^^
 
Rui
but say if you created a wrapper around <form> it will tell me that the reference I have to the wrapper element does not have the submit method
 
however, I'm a bit confused here
 
Rui
say if I do <form className="ui form" onSubmit={ this.handleSubmit} ref={ (form) => { this.activityForm = form } } >
where <form> is a native HTML element
 
7:16 AM
please use:
this.activityForm.getWrappedInstance().submit();
 
Rui
ok
 
remember to put "getWrappedInstance()"
oh, do you mean you tried but failed ?? sorry
 
Rui
no
let me try getWrappedInstance
I get a "Uncaught TypeError: Cannot read property 'getWrappedInstance' of null
"
 
ok...
 
Rui
Do I need to import anything to be able to use that?
 
7:19 AM
so how about using:

1/ <Form ref="activityForm" ....>
2/ this.refs.activityForm.getWrappedInstance().submit();
 
Rui
let me see
same
 
ok, plz wait ^^
but if you use this.refs.activityForm.submit();
does anything happen (still using ref="activityForm" - string)
 
Rui
not really
is it possible to use ref in a custom react component?
 
sure, that's react way
 
Rui
but if I switch back to <Form> instead of <form> the reference is null
Now I am able to get a reference of <Button>, but it gives "this.activityFormButton.getWrappedInstance is not a function"
 
7:35 AM
right..so currently don't use "getWrappedInstance"
actually, how does your code look like now, the one from gist seems to be the first version, doesn't it ?
 
Rui
let me update the working version
very hacky and I cannot seperate the form out as a componenet
 
ok i see what you mean
so smart
using ref to the button, then trigger its "click"
but it works now ^^ ?
 
Rui
the reason that I cannot put the ref in form
is because the it ignores the onsubmit the handler
 
infact, <Form> and <form> is so different
 
Rui
now it works
 
7:40 AM
the <Form> belongs to semantic, and we are not sure what they do under ^^
 
Rui
thanks
 
if it works then great ^^
so how about an upvote and/or accept on my answer
 
Rui
I think you should edit your solution to be like then I will upvote
 
maybe I need to update the answer to the right direction ?
 
Rui
therefore other people can google it
 
7:41 AM
sure
 
Rui
You take the credit
I am going to accept your solution first, don't forget to edit it
Thank you very much for your help
You got a facebook or anything?
 
I finished editing it, without forgetting giving credit to your smart idea too
you can connect with me here: thinhvo0108.info
which contains linkedin, fb, NPM, and this SOF profile page too ^^
Thanks
 

last day (14 days later) »