I have the following structure in my ReactJS App - CodeSandBox link.
I'm trying to somehow submit the Formik form by using a button of Bootstrap modal window, however I am unable to understand how to call the form submission from 2 components down the tree and bring the functions together.
Could someone kindly advise whether it's even something that can be achieved?
Thanks!
In the FormFields component, you need to add an id to your form
<Form id="fooId">
and for the modal button you add the form and type attribute like:
<Button
...
type="submit"
form="fooId"
...
/>
And the form would be submitted. You can skip passing the onClick event to that button and pass the doSubmit method to the Formik component in FormFields component.
Codesandbox
Related
I have Modal in React Js which is working fine on button click
Here is Modal
<Modal isOpen={modalIsOpen} onRequestClose={()=>setmodalIsOpen(false)}>
Here is Button on which click it is working
<button onClick={()=>{setmodalIsOpen(true)}}>Open modal</button>
Here is my function or hook
const [modalIsOpen, setmodalIsOpen] = useState(false)
That is quite simple as you can see but the task is -> with this working as weel
i want to open modal with a prop value which will be bollean(TRUE) .
Here is my prop
props.modalIsOpen
Its is containing the true value i have checked with console.
Now the question is where should i put condition to check
If there is true value in props please open the modal.
Else its working should be with hooks.
What i tried is
if(props.modalIsOpen){
setmodalIsOpen(true)
}
i know this is funny because it completely blanks my page. so i know this condition is now correct.
One more thing i am using function here on Modal page and class on the page from where props coming from.
I have a project with react,redox and material-ui. there are some textfields on page and I want to show save button only when at least one of textfields is changed. I could add some function to onChange of textfields and set isDirty to true and show button when this property set to true. but I'm wondering is there any clean and good way to do this?
If you are already using Redux. I am suggesting you to have a look at Redux Form - https://github.com/redux-form/redux-form
In redux form, after you initialize the redux form on your component, you may use Field component for each of your input.
<Field component="input" type="text" />
By using the reduxForm High-order component, it will inject some of the props like dirty,pristine,touch etc.. which helps you to show or hide your button.
export default reduxForm({
form: 'formName' // a unique identifier for this form
})(YourComponent)
So, I'm trying to use Semantic UI modal component with the form component.
My problem is that if I use these two together the UI becomes bad.
I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry
As you can see now the submit button does not attached to the form.
If I move the Form component directly inside the Modal component, like this:
<Modal...>
<Form>
...
</Form>
</Modal>
the submit will attached to the form, but the UI breakes down.
I tried to add different classes to these components (like ui modal to the Form component, but it doesnt worked well).
Do you have any suggetsion?
Thanks for you help!
You can use the as prop on the Modal to make it a form element.
<Modal
as={Form}
onSubmit={e => handleSubmit(e)}
open={true}
size="tiny">
Any button with the submit type in your modal will fire the onSubmit handler. I find this to be a nice way to opt-in to required fields and easy validation by the browser on form elements.
Be sure to pass the event to your submit handler and use the preventDefault method to avoid the browser from automatically trying to post your form.
Forked your sandbox and made a working example. The modal is changed to a <form> element, the Input has the required property and the browser will demand the element is valid before firing the onSubmit handler. The default form action is prevented, and you can handle as desired with whatever.
I have two components List and Form. Onthes components, i'm using Dropzone
I disabled click, just Drag and Drop is possible
But, on the form component, I would like to add a button, wich enable to add a dcument in browsing.
In the form component, I call my component dropzone
<UploadZone onupload={this.props.onCreateDocument} onsuccessupload={this.uploadedfile} lastfileupload={this.props.lastuploadfile} />
I've added my button :
<RaisedButton label="Add" primary={true} onClick={this.browseDz}/>
browseDz = () => {
}
I don't know how call Dropzone on the button to add a document
Thank you for yours answers
You wouldn't use Dropzone for this part, you implement it yourself. You could use the trick where you put this button in a <label htmlFor={id}> and have a file input with the same id. You'll have two ways of receiving files, so just store the latest selection from the user in one state key.
I am trying to get a form working inside of a Material UI Dialog component. If I wrap the Dialog in the form tags, they do not even show up in the resulting html (no idea why yet)...
<form onSubmit={someFunction}>
<Dialog>
...
</Dialog>
</form>
If I reverse it and put the form tags inside the Dialog, the form elements show up in the resulting html, but then the action button set to type="submit" will not fire the form's onSubmit.
<Dialog>
<form onSubmit={someFunction}>
...
</form>
</Dialog>
Has anyone had any success getting this combination to work? I know I can just call the function directly from the action button click, but I am also using Redux Form and have other non-dialog forms in the app, so I have it bound to the form element. So I really need to invoke the form submit from a Dialog somehow.
Actually - I have/had the onSubmit={handleSubmit(this.myFunction)} to begin with and that was not the issue. The issue turned out to be how Material UI mounts the Dialog (which apparently is different than react-toolbox). They mount it on the body - I assume for easier positioning - so anything outside of the Dialog is ignored.
With the form inside the Dialog, the buttons are outside the form (which is again apparently different than react-toolbox). So to make it work, you have to use the HTML 5 'form' attribute as detailed here (along with a poly-fill for older browsers if needed). The form needs an id attribute and then the button outside it needs a form attribute with the value set to the id of the form. Then the form elements inside the dialog behave as expected. Thanks for the response though!
The material-ui Dialog component inherits from the material-ui Modal component, which means it accepts the prop "disablePortal" - which is false by default.
from the docs:
"Disable the portal behavior. The children stay within it's parent DOM hierarchy."
https://material-ui.com/api/modal/#props
by default, the dialog is rendered as a child of your root html node, to have it render inside the <form> tag, you need to disable the portal behavior.
<form onSubmit={someFunction}>
<Dialog disablePortal>
<DialogTitle>
title!
</DialogTitle>
<DialogContent>
form fields go here
</DialogContent>
<DialogActions>
<button type="submit">submit!</button>
</DialogActions>
</Dialog>
</form>
<form onSubmit={someFunction}>
<Dialog disablePortal>
<DialogTitle>
title!
</DialogTitle>
<DialogContent>
form fields go here
</DialogContent>
<DialogActions>
<button type="submit">submit!</button>
</DialogActions>
</Dialog>
</form>
Hey yeah I have this combo working... well I am using the Dialog component from react-toolbox which is very similar to Material-ui but they use Css-modules for styles instead of inline.
So the function you provide to the onSubmit attribute of the form element is going to be the handleSubmit function from redux-form. If you want to do anything such as dispatch actions and store the data then you will need to pass in an onSubmit function to the handleSubmit function. What happens is your onSubmit function is called with the values(object with properties of the values of your form) and the dispatch function from the redux store. You can see the project I have which has the setup you are looking for.
Instead of onSubmit={someFunction}, make it
<Dialog>
<form onSubmit={this.someFunction}>
...
</form>
</Dialog>