最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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>
     )
   }
Share Improve this question asked Oct 2, 2020 at 12:18 xorbiousxorbious 812 silver badges5 bronze badges
Add a ment  | 

4 Answers 4

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>
发布评论

评论列表(0)

  1. 暂无评论