React final form - submit a wizard form on click of a radio button

Question

I would like to submit a step of wizard form on click of radio button instead of classic submit button.

Radio component:

const Radio = ({ input, children }) => (
  <label className="form-radio city">
    <input {...input} />
    <span className="radio-text">{children}</span>
  </label>
)

My class:

<ProfileForm.Page>
   {CITIES.map(({ name }) => (
       <Field component={Radio} type="radio" name="city" key={name} value={name}>
           {name}
        </Field>
   ))}
   <button type="submit"></button>
 </ProfileForm.Page>

This worked when I use the submit button but I want to remove it and submit city directly on click on the radio button.

Answer 1

I tried to had an onChange event with "this.form.submit()" but I cannot acced to "form".

I have a parent component ProfileForm.jsx with:

 <Form validate={this.validate} onSubmit={this.handleSubmit} initialValues={values}>
    {({ handleSubmit, invalid, pristine, values }) => (
        <form onSubmit={handleSubmit}>
            {activePage}   
        </form>
    )}
 </Form>

and my radio buttons are on the "active page" City.jsx with the code of my first post