Formik: Calling handleSubmit in arrow function does not work as expected

Created on 15 Jun 2018  路  3Comments  路  Source: formium/formik

Describe the bug
Trying to manipulate props before calling handleSubmit while still passing in the event from a button to handleSubmit does not work as expected.

To Reproduce
Create a simple button such as this:

<Button onClick={e => { this.props.setValues({ shouldPrint: true }); return handleSubmit(e)}}>Submit and Print</Button>

then, using withFormik:
const SubmitAndPrintForm = withFormik({ mapPropsToValues: props => { ... }, validationSchema: props => object().shape({ ... }), handleSubmit: (val, { props, setSubmitting }) => { console.log(val) console.log(props) }, })(SubmitAndPrintComponent);

Notice that console.logging val returns the object { shouldPrint: true}, while shouldPrint is not in the list of props console.logged in the next line

Expected behavior
One would expect that handleSubmit would handle the event the same way that it does when normally passing ...onClick={handleSubmit}..., and that shouldPrint would be located in the list of props after manually setting the value, and that console.logging values would display the form values as expected. My current work around for this is to call:

...onClick={e => { this.props.setValues({ shouldPrint: true, values: props.values }); return handleSubmit(e)}}...

Suggested solution(s)
Allow handleSubmit to take a second Object parameter, so that it can work something like this:

const myObject = { something: true, somethingElse: "hello" } handleSubmit(e, myObect).

This way, withFormik can be used as such:
...handleSubmit: (values, customObject, bag) => { // do stuff with values // do stuff with customObject // do stuff with bag }

  • Formik Version: "^0.11.11"
  • React Version: "^16.4.0"
  • OS: 10.13.5
  • Node Version: 8.9.4

Most helpful comment

HandleSubmit needs an event from a form event onSubmit. You can use submitForm here

All 3 comments

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

I have the same problem. I need to pass state values from inside the component that was wrapped using withFormik(). I tried doing the stuff I needed from inside the component and manually call the handleSubmit() function and it doesn't trigger the validation errors.

HandleSubmit needs an event from a form event onSubmit. You can use submitForm here

Was this page helpful?
0 / 5 - 0 ratings