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

kb5ga3dv 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(131)

我尝试使用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>
     )
   }

reactjs

来源：https://stackoverflow.com/questions/64171436/how-to-make-use-of-radio-group-with-useformik-hook

2条答案

按热度按时间

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代码中使用该值实现某种条件检查

赞(0）回复(0）举报 2023-01-12

5w9g7ksd2#

您需要像下面这样MaponChange。

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

赞(0）回复(0）举报 2023-01-12

我来回答

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

2条答案

相关问题

热门标签

最新问答