我尝试使用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>
)
}
2条答案
按热度按时间j1dl9f461#
我放弃了
getFieldProps
的实现,而是做得更简单,如下所示:请注意,如果您使用
formik.values.radioButtonValue
值作为useEffect依赖项,请按如下方式设置:formik.values.radioButtonValue = e.target.value
不会触发更改,并且useEffect不会启动(至少在我的例子中没有)。作为一种替代方法,您必须在useEffect代码中使用该值实现某种条件检查5w9g7ksd2#
您需要像下面这样MaponChange。