如何解决react-bootstrap-即使在重置后也会检查Form.Check单选按钮
单选按钮(来自react-bootstrap Form.Check)即使在单击重置按钮后被检查属性值变为false也会被检查(reset仅运行由formik提供的 resetForm 方法)。它在formik内部使用,并且在redux状态更改时重新呈现。
以下是造成此问题的代码,其中我还添加了一条调试行,以在所附的图像中显示检查条件的值。
const handleSubmitClick = (_data: any) => {
dispatch(setUploadSatus({submitted: true,form: _data}));
}
const status = useSelector(uploadSatus);
const genderOptions = [
{ value: 'Female',label: 'Female' },{ value: 'Male',label: 'Male' },];
*
**some code**
*
<Formik
onSubmit={data => handleSubmitClick(data)}
initialValues={{
age: '',gender: '',condition: '',symptoms: [],files: [],...status.form
}}
validationSchema={schema}
>
{({
handleSubmit,handleChange,setFieldValue,resetForm,values,touched,errors,setTouched,initialTouched
}) => (
<Form noValidate onSubmit={handleSubmit} onReset={resetForm}>
{genderOptions.map((gender: any) => {
return <>
{values.gender === gender.value ? 'True' : 'Flase'}
<Form.Check
inline
type="radio"
name="gender"
value={gender.value}
checked={values.gender === gender.value}
onChange={handleChange}
label={gender.label}
disabled={status.submitted}
isValid={touched.gender && !errors.gender && !status.submitted}
isInvalid={touched.gender && !!errors.gender}
/></>
<Button type="reset" variant="info" className="btn-block">
Reset
</Button>
</Form>
)
}
</Formik>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。