React Formik bind the external button click with onSubmit function in <Formik>

Question

I'm trying to submit the form by using the external buttons which are located outside of <Form> or <Formik> tags

As shown in the following screenshot, my button is in Bootstrap > Modal Footer section and they are outside of form tag. I'm trying to submit the form when the user clicks on the Submit button.

Please see the similar code as the following. I uploaded it onto CodeSandbox.

function App() {
      return (
        <div className="App">
          <Formik
            initialValues={{
              date: '10/03/2019',
              workoutType: "Running",
              calories: 300
            }}
            onSubmit={values => {
              console.log(values);
            }}
            render={({ values }) => {
              return (
                <React.Fragment>
                  <Form>
                    Date: <Field name="date" />
                    <br />
                    Type: <Field name="workoutType" />
                    <br />                
                    Calories: <Field name="calories" />
                    <br />  
                    <button type="submit">Submit</button>
                  </Form>
                  <hr />
                  <br />
                  <button type="submit" onClick={() => this.props.onSubmit}>
                    Button Outside Form
                  </button>
                </React.Fragment>
              );
            }}
          />
        </div>
      );
    }

Since the button is outside of the form, it doesn't trigger Submit behaviour and I don't know how to connect this button's action and Formik OnSubmit method. If I moved that button inside form tag, it works as expected and I don't have to do anything special.

I tried to follow this SO's post React Formik use submitForm outside . But I really couldn't figure out how it works.

I tried to bind the button click action like onClick={() => this.props.onSubmit} as mentioned in the post. But it's not doing anything or showing any error.

Could you please help me how I can bind the Submit button outside of the form with 'OnSubmit' function in Formik?

Lailalain

Answer 1

It appears you have access to the submitForm method as a property of the argument passed to the render function. Simply call that with the button's onClick handler...

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}

Falgout

Answer 2

Formik's render give you a callback param handleSubmit. Assign this to the <button.

Since your button is not in the form, change its type to <button type="button"... and assign the onClick to onClick={handleSubmit}

Update the render as follow,

render={({ values, handleSubmit }) => {
  return (
    <React.Fragment>
      <Form>
        Date: <Field name="date" />
        <br />
        Type: <Field name="workoutType" />
        <br />
        Calories: <Field name="calories" />
        <br />
        <button type="submit">Submit</button>
      </Form>
      <hr />
      <br />
      <button type="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}

Inveteracy

Answer 3

This is because the handleSubmit function is never called, replace onClick={() => this.props.onSubmit} with onClick={props.handleSubmit}

edit: since it looks like you need a little more directions, here is an edited version of the linked code sandbox, the correct prop is handleSubmit and you need to destructure it from the props just like you did with values.

https://codesandbox.io/s/qz2jnlp929

Unkind

It's showing "Cannot read property 'props' of undefined" error – Lailalain

Answer 4

Just use onClick={handlesubmit} in your external Button component making sure to destructure the handlesubmit function from the Formik component. Please have a look;

<Formik
initialValues={{field: true}}
onSubmit={() => console("Submited via my onSubmit function")}
>

{({ handleSubmit }) => (

  <Form>
          <Field
            name="field"
            placeholder="Date"
          />
  </Form>

  <Button type="submit" onClick={handleSubmit}>
    Save
  </Button>

</Formik>

Quintillion