-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v2] <Formik /> ref
prop
#1603
Comments
I guess this applies to withFormik aswell? I have two forms similar to: I would like to make a reset button that runs formik.resetForm() on both forms. I can get a reference to the withFormik react node, but not child which is the actual Formik react node (which I'm guessing provides the formikBag API I need). Ideas? |
Have you made any progress with this? I'm facing a similar problem. |
I managed to get this to work by passing in the ref as a propery. Then inside the form
Now I can call this from the parent with:
|
Any updates? |
Any updates on this, I can't upgrade to v2 because I have to reset some forms in my app using the reference from outside the form itself |
PR's welcome. |
I would like to be able to implement this, but I don't know how to fix the interface |
Do we really need this? While you can't do |
How is this for a work-around? Our code is still on v1 and it works but I haven't tested with v2. render() {
const { children, ...props } = this.props;
return (
<Formik {...props}>
{formikProps => {
this.formikProps = formikProps;
return this.renderChildren(formikProps);
}}
</Formik>
);
} |
Here is a workaround that works for me in v2.
Then I use the new component; FormikWithRef instead of Formik;
|
What's the status of this? I see this was closed, and I can see useImperativeHandle in the codebase in 2.1.2, but I can't pass a ref into the component. I get the TS error: |
You can get a ref to const bagRef = useRef();
<Formik innerRef={bagRef} /> Note: this isn't a reference to the Formik component, but to the "bag" of formik tools. like |
To me this looks like an undocumented breaking change that should be included in "Migrating to v2" of docs. It is also poorly typed, the |
@johnrom What would be the classes equivalent? I'm trying with For Formik slug being "without tears", I already have dropped a lot :( |
@diosney useRef is specific to functional "React hooks". functional components are generally considered preferable to classes in many scenarios except some very complex use cases that functional components cannot be used for. however, for backwards compatibility the class-based ref method is class MyClass = {
public constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<Formik innerRef={this.myRef} />
);
}
} Note, besides using |
@johnrom Thanks for your answer and sorry for my grunt, but I have several rounds on this already and tested lot of things without making it working as it should, I'm really just about pulling my off my hair. I already tried your solution with
and any call to The only way I could get some partial success was by something like:
but for some wicked reason it only works if I made some change in the code while developing and having Hot Reload enabled. Have any other suggestions? Really don't know why it is not working, I updated Formik to 2.1.4 from 2.1.1 and all remains the same. I'm trying to use those values on a |
@diosney if you open a new issue someone may be able to help you there. during issue creation, you should try and reproduce your issue in a CodeSandbox (link to the sandbox starter is in the new issue creation template). You might figure out where the issue is during reproduction (happens a lot!), or if you are able to reproduce we'll be able to look immediately and see where the problem is. |
@johnrom OK, I understand, thanks for your time. |
Hi @johnrom, hi all
I've tried using the
then when trying to use it for a reset, the correct values are present but the reset (even that it passes the new values when debbuged inside formik resetForm fn.) doesn't take effect
I guess it has to be combined as some suggestions with Another approach I've tried is using the
Then using this down in the Formik form:
I'm setting a variable Update: I've managed to do the reset with keeping the current Initial values in a state, and then passing that state object Not liking this... but it's a work arround. |
To access formik by reference, you can do like this:
If you print the reference This way it is possible to manipulate formik from anywhere 😄 😎 that's it |
🚀 Feature request
Current Behavior
Since switching
<Formik />
to a function component if you try to attach a ref to it as such:you will get the following error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Desired Behavior
The desired behaviour is for there to be no error and the ref to provide a set of APIs to programmatically interact with
<Formik />
.Suggested Solution
To enable the functionality it seems that the hook
useImperativeHandle
will be needed to wrap<Formik/>
and expose the available methods.An example per the docs
Who does this impact? Who is this for?
This is for anyone who needs to implement any programmatic functionality on .
Describe alternatives you've considered
Use the prior version where is a class component.
Additional context
I was trying to implement the debounced autosave that was handled by the parent component, without the need for a specific component that is a child of .
The text was updated successfully, but these errors were encountered: