javascript - How to make use of Radio Group with useFormik Hook - Stack Overflow

admin管理员组

文章数量:1316980

I am trying to get useFormik to validate radio groups, but it seems not to work, here is a brief example of what I am doing, whenever I submit the form after checking any of the radio input, formik throws validation error, ({currState:"you must choose property state"}), even though I choose an option. I realized getFieldProps attaches value field to the radio, so i tried using defaultValue then react throws an error about choosing one of controlled and uncontrolled ponents.

     import { useFormik } from "formik"
     export function ListProperty(){
     const { handleSubmit, getFieldProps, touched, errors } = useFormik(
             {
           initialValues: {
            currState:"",
          },
      validationSchema:Yup.object().shape({
         currState:Yup.string().required("you must choose property state")
     }),
     return (
        <form onSubmit={handleSubmit} >

         <div className="form-group inline">
            <div className="form-control">
              <input type="radio" 
              name="currState"  
              {...getFieldProps("currState")} 
              value="serviced" 
              />
              <label>serviced</label>
            </div>

            <div className="form-control">
              <input 
              type="radio" 
              value="furnished" 
              name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>furnished</label>
            </div>

            <div className="form-control">
              <input
                type="radio"
                value="newlybuilt"
               name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>newly built</label>
            </div>

          </div>
           <button type="submit">submit </button>
           </form>
     )
   }

I am trying to get useFormik to validate radio groups, but it seems not to work, here is a brief example of what I am doing, whenever I submit the form after checking any of the radio input, formik throws validation error, ({currState:"you must choose property state"}), even though I choose an option. I realized getFieldProps attaches value field to the radio, so i tried using defaultValue then react throws an error about choosing one of controlled and uncontrolled ponents.

     import { useFormik } from "formik"
     export function ListProperty(){
     const { handleSubmit, getFieldProps, touched, errors } = useFormik(
             {
           initialValues: {
            currState:"",
          },
      validationSchema:Yup.object().shape({
         currState:Yup.string().required("you must choose property state")
     }),
     return (
        <form onSubmit={handleSubmit} >

         <div className="form-group inline">
            <div className="form-control">
              <input type="radio" 
              name="currState"  
              {...getFieldProps("currState")} 
              value="serviced" 
              />
              <label>serviced</label>
            </div>

            <div className="form-control">
              <input 
              type="radio" 
              value="furnished" 
              name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>furnished</label>
            </div>

            <div className="form-control">
              <input
                type="radio"
                value="newlybuilt"
               name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>newly built</label>
            </div>

          </div>
           <button type="submit">submit </button>
           </form>
     )
   }

• javascript
• reactjs
• formik

Share Improve this question Follow asked Oct 2, 2020 at 12:18 xorbiousxorbious 8122 silver badges55 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I gave up on the implementation with getFieldProps and did it simpler, like this:

import { useFormik } from 'formik'

export default function Component() {

  const formik = useFormik({
    initialValues: { 
      radioButtonValue: ''
    },
    onSubmit: values => console.log(values)
  })

  const handleRadioButtons = e => formik.values.radioButtonValue = e.target.value

  return (
   <form onSubmit={formik.handleSubmit}>
     <input 
       type="radio" 
       id="one"
       name="group" 
       value="One" 
       onChange={e => handleRadioButtons(e)}
       required
     />
     <label htmlFor="one">One</label>
     <br />

     <input 
       type="radio" 
       id="two"
       name="group" 
       value="Two" 
       onChange={e => handleRadioButtons(e)}
     />
     <label htmlFor="two">Two</label>

     <button type="submit">Submit</button>
   </form>
  )
}

Beware, if you use formik.values.radioButtonValue value as a useEffect dependency, then setting it like this: formik.values.radioButtonValue = e.target.value not gonna trigger the change, and useEffect won't launch (at least in my case it didn't). As an alternative, you gonna have to implement some kind of condition check with this value in your useEffect code

You need to map onChange like below.

<input 
  type="radio" 
  value="furnished" 
  name="currState"  
  onChange={getFieldProps("currState").onChange} 
/>

In my form that's work:

<label>
   <input type="radio" name="number" value="one" onChange={formik.getFieldProps("number").onChange}/>One
</label>
<label>
<input type="radio" name="number" value="two" onChange{formik.getFieldProps("number").onChange}/>Two
</label>

const formik = useFormik(
    {
        initialValues: {
            projectActivity: "Active"
        },
        onSubmit: (values) => {
            console.log(values);
        }
    }
);

<div className='flex flex-col'>
                    <label className='font-bold ml-1 my-1'>Project Activity</label>
                    <div className='flex justify-start items-center gap-x-3 mt-1'>
                        <input
                            type="radio"
                            name="projectActivity"
                            id="active"
                            value="Active"
                            onChange={formik.handleChange}
                            checked={formik.values.projectActivity === 'Active'}
                            className="radio"
                        />
                        <label htmlFor="active">Active</label>
                        <input
                            type="radio"
                            name="projectActivity"
                            id="inactive"
                            value="Inactive"
                            onChange={formik.handleChange}
                            checked={formik.values.projectActivity === 'Inactive'}
                            className="radio"
                        />
                        <label htmlFor="inactive">Inactive</label>
                    </div>
                </div>

本文标签： javascriptHow to make use of Radio Group with useFormik HookStack Overflow