Source:  Twitter logo

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?

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

16 users liked answer #0dislike answer #016
Ray Yecko profile pic
Ray Yecko

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/>
10 users liked answer #1dislike answer #110
Iván López Acosta profile pic
Iván López Acosta

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>
2 users liked answer #2dislike answer #22
Atif profile pic
Atif

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).