form submit on component
Answered
Yellowstripe scad posted this in #help-forum
Yellowstripe scadOP
Hi!
How to submit data from form to object on component, but without submit button? I have page with multiple components, and each component has a form. When I click Next or Back button (buttons are not on components), object binded to form stays empty.
Tnx!
How to submit data from form to object on component, but without submit button? I have page with multiple components, and each component has a form. When I click Next or Back button (buttons are not on components), object binded to form stays empty.
Tnx!
Answered by New Guinea Singing Dog
And then you could do something like
By doing this, you're using the set function from the parent state to that testObject to actually make changes to react state
export default function ComponentOne({ test1, setTest1 }) {
return (
<div>
<p>{test1}</p>
<input onChange={ (e) => { setTest1(e.target.value)}}>Change value here</input>
</div >
)
}By doing this, you're using the set function from the parent state to that testObject to actually make changes to react state
14 Replies
New Guinea Singing Dog
You don't have to use a onSubmit() listener on your form element
maybe you could set up like a keypress listener, then if key.code == 'Enter' e.g process the request
or could use a button with an onClick() listener
Yellowstripe scadOP
I can´t use either of that, on page (not on component) there are buttons Next and Back, and Stepper control, which all can change visible component with form. Is there any listener for components in Next.JS, for example, when components hide, then submit data to object?
New Guinea Singing Dog
Do you mean the browser next & back buttons? Wdym by not on component?
I think to run a function when a component demounts
you could do something like
useEffect(() => {
return () => {
//Code here for demounting
}
},[])Yellowstripe scadOP
No, I have custom next/back buttons. Here is how it looks like:
return (
<div>
<div className={${index === 0 ? 'mb-10 w-full' : 'hidden'}}>
<ComponentOne test={test1}/>
</div>
<div className={${index === 1 ? 'mb-10 w-full' : 'hidden'}}>
<ComponentTwo test={test2}/>
</div>
<button onClick={back} className='m-5'>Previous</button>
<button onClick={next} className='m-5'>Next</button>
</div>
)and in ComponentOne and ComponentTwo i have a form with testObject binded on
So. the problem is when i change something on form (on ComponentOne or ComponentTwo) and click Next/Previous button, object doesn´t change on page (because there is no submit button on components)
New Guinea Singing Dog
Because the objects you are passing to the child exist in the parent component
you'll also need to pass the setter function from useState() down into the props
New Guinea Singing Dog
And then you could do something like
By doing this, you're using the set function from the parent state to that testObject to actually make changes to react state
export default function ComponentOne({ test1, setTest1 }) {
return (
<div>
<p>{test1}</p>
<input onChange={ (e) => { setTest1(e.target.value)}}>Change value here</input>
</div >
)
}By doing this, you're using the set function from the parent state to that testObject to actually make changes to react state
Answer
Yellowstripe scadOP
Great! Thanks a lot, this works!