reactjs 如何通过useFormik钩子使用单选按钮组

kb5ga3dv  于 2023-01-12  发布在  React
关注(0)|答案(2)|浏览(130)

我尝试使用useFormik来验证单选按钮组,但似乎不起作用,下面是我正在做的一个简单示例,每当我在检查任何单选按钮输入后提交表单时,即使我选择了一个选项,formik仍会抛出验证错误({currState:“you must choose property state”})。我意识到getFieldProps会将值字段附加到单选按钮上,所以我尝试使用defaultValue,然后react抛出一个关于选择受控和非受控组件之一的错误。

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>
     )
   }
j1dl9f46

j1dl9f461#

我放弃了getFieldProps的实现,而是做得更简单,如下所示:

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>
  )
}

请注意,如果您使用formik.values.radioButtonValue值作为useEffect依赖项,请按如下方式设置:formik.values.radioButtonValue = e.target.value不会触发更改,并且useEffect不会启动(至少在我的例子中没有)。作为一种替代方法,您必须在useEffect代码中使用该值实现某种条件检查

5w9g7ksd

5w9g7ksd2#

您需要像下面这样MaponChange。

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

相关问题