React Formik Field onChange event handle

Question

I am trying to handle onChange for Field component in React Formik, but it doesn't work. I also tried to handle it outside Formik component by:

handleChange(e) {
  console.log('changing');
}
<Field type="radio" name="players" value="1" onChange={e => this.handleChange(e)}/>

but I am getting the warning:

A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).

For now my code looks like this:

<Formik
  onChange={() => {
    console.log('changing');
  }}
  onSubmit={(values) => {
    console.log('submitted');
  }}
>
{({ isSubmitting, handleChange }) => (
  <Form>
    <InputWrapper>
       <span>1</span>
       <Field type="radio" name="players" value="1" onChange={handleChange}/>
       <span>2</span>
       <Field type="radio" name="players" value="2" onChange={handleChange}/>
    </InputWrapper>
    <button type="submit" disabled={isSubmitting}>
       {isSubmitting ? 'Loading..' : 'Start'}
    </button>
  </Form>
)}
</Formik>

Any tips/ideas?

Answer 1

One issue I have found with introducing the onBlur:handleBlur to your Formik Field is that it overrides the Formik Validation.

Use onKeyUp={handleChange}

This solved said problem

Answer 2

You must to use the InputProps of Field like the following...

import { TextField } from 'formik-material-ui';

<Field
  type="radio" 
  name="players" 
  value="2"
  component={TextField} 
  InputProps={{ onBlur:handleBlur }}/>

To use the InputProps in the Field you need to use a component TextField from the formik-material-ui lib.

Another way is use the onKeyUp or onKeyDown, that functions work ok with Field and that functions are like onChange

<Field 
  type="radio" 
  name="players" 
  value="2" 
  onKeyUp =this.handleChange/>

Answer 3

I found one trick which worked well for me, you can use "values" of formik and call a method passing the "values" as parameter and perform the action using new values.

const handleUserChange = (userId: number) => {
    //userId is the new selected userId
  };


 <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
        enableReinitialize
      >
        {({ isValid, isSubmitting, values }) => (
          <Form>
            <table className="table">
              <tbody>
                <tr>
                  <td>Users</td>
                  <td>
                    <Field name="userId" className="form-control" as="select">
                      <option value="">--select--</option>
                      {data.Users.map((user, index) => (
                        <option key={user.id} value={user.id}>{`User ${index + 1}`}</option>
                      ))}
                    </Field>
                  </td>
                </tr>
                {handleUserChange(values.userId)}
              </tbody>
            </table>

            <div className="row">
              <div className="col-sm-12">
                <SubmitButton label="Save" submitting={isSubmitting} disabled={!isValid || isSubmitting} />
              </div>
            </div>
          </Form>
        )}
      </Formik>