[英]Enabling and disabling submit button with checkboxes
I'm using Formik for my React forms which I am quite new too, I have a form with two checkboxes and a submit button that is disabled by default.我正在为我的 React forms 使用 Formik,我也很新,我有一个带有两个复选框和一个默认禁用的提交按钮的表单。 I need to find a way to check if a checkbox has been checked or not.
我需要找到一种方法来检查复选框是否已被选中。 If all two checkboxes have been checked the submit button is enabled and if any remains unchecked the submit button remains disabled.
如果已选中所有两个复选框,则启用提交按钮,如果未选中任何复选框,则提交按钮保持禁用状态。
My code:我的代码:
FormikWithRef: FormikWithRef:
import React, { useEffect, forwardRef, useImperativeHandle } from 'react';
import { Formik } from 'formik';
function FormikWithRef(props, ref) {
let formikPropObj = {};
useImperativeHandle(ref, () => formikPropObj);
useEffect(() => {
if (props.refSetter && props.invokable)
props.refSetter({
ref: ref.current,
invokableFunction: props.invokable,
});
}, []);
return (
<Formik {...props}>
{(formikProps) => {
formikPropObj = formikProps;
if (typeof props.children === 'function') {
return props.children(formikProps);
}
return props.children;
}}
</Formik>
);
}
export default forwardRef(FormikWithRef);
RegisterForm:注册表格:
import React from 'react';
import PropTypes from 'prop-types';
import FormikWithRef from './FormikWithRef';
const RegisterForm = ({
formRef,
internalRef,
children,
initialValues,
validationSchema,
onSubmit,
enableReinitialize,
validateOnMount,
initialTouched,
invokable,
refSetter,
}) => {
return (
<FormikWithRef
enableReinitialize={enableReinitialize}
validateOnMount={validateOnMount}
initialTouched={initialTouched}
validateOnChange
validateOnBlur
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
ref={formRef}
internalRef={internalRef}
invokable={invokable}
refSetter={refSetter}
>
{(props) => (
<form ref={internalRef} onSubmit={props.handleSubmit}>
{children}
</form>
)}
</FormikWithRef>
);
};
RegisterForm.propTypes = {
formRef: PropTypes.object,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
initialValues: PropTypes.object,
validationSchema: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
onSubmit: PropTypes.func,
enableReinitialize: PropTypes.bool,
validateOnMount: PropTypes.bool,
initialTouched: PropTypes.object,
internalRef: PropTypes.func,
handleSubmit: PropTypes.func,
invokable: PropTypes.func,
refSetter: PropTypes.func,
};
RegisterForm.defaultProps = {
formRef: null,
children: null,
initialValues: {},
validationSchema: null,
onSubmit: () => {},
enableReinitialize: false,
validateOnMount: false,
initialTouched: {},
internalRef: null,
handleSubmit: null,
invokable: null,
refSetter: null,
};
export default RegisterForm;
Register Component:注册组件:
import React, { useState, useRef } from 'react';
import Registerform from './RegisterForm';
import useUserApi from './useUserApi';
const RegisterForm = () => {
const [submitting, setSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [disableSubmit, setDisableSubmit] = useState(true);
const formRef = useRef();
const initialValues = {
cookies: false,
terms: false,
};
const {register} = useUserApi();
const submitRegisterForm = async (values) => {
const body = {
terms: values?.terms || null,
cookies: values?.cookies || null,
};
const res = await register(body);
return res;
};
const onFormSubmit = async (values, { setErrors }) => {
setSubmitting(true);
const result = await submitRegisterForm(values);
if (result && !(await checkErrors(result))) {
setSubmitting(false);
setIsSubmitted(true);
return true;
}
if (result.status === 500)
setErrors('A problem occurred submitting form.');
setIsSubmitted(false);
setSubmitting(false);
return false;
};
useEffect(() => {
if (isSubmitted) {
const historyScreen = reverse(`${routes.users}`);
history.push(historyScreen);
}
}, [isSubmitted]);
return initialValues ? (
<FormWrapper>
<RegisterForm
initialValues={initialValues}
onSubmit={onFormSubmit}
formRef={formRef}
>
<InputWrapper width="50%" verticalAlign="top">
<CheckBox
label={
<LabelText>I have agreed to terms</LabelText>
}
name="terms"
id="terms"
/>
</InputWrapper>
<InputWrapper width="50%" verticalAlign="top">
<CheckBox
label={
<LabelText>I agree to cookies.</LabelText>
}
name="cookies"
id="cookies"
/>
</InputWrapper>
<ButtonWrapper>
<SaveButton
type="submit"
buttonText="Register"
disabled={disableSubmit}
/>
</ButtonWrapper>
</Form>
</FormWrapper>
) : null;
}
export default RegisterForm;
you need to expose the values from your RegisterForm.您需要公开 RegisterForm 中的值。 I assume
props
should have values
as well.我认为
props
也应该具有values
。 So change your code as below所以改变你的代码如下
<FormikWithRef
enableReinitialize={enableReinitialize}
validateOnMount={validateOnMount}
initialTouched={initialTouched}
validateOnChange
validateOnBlur
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
ref={formRef}
internalRef={internalRef}
invokable={invokable}
refSetter={refSetter}
>
{(props) => (
<form ref={internalRef} onSubmit={props.handleSubmit}>
{children(props.values)} // make your children as a function
</form>
)}
</FormikWithRef>
Now when you are rendering the RegisterForm
you can do this现在,当您渲染
RegisterForm
时,您可以执行此操作
<RegisterForm
initialValues={initialValues}
onSubmit={onFormSubmit}
formRef={formRef}
>
{(values) => { // consume the value here
return (
.....
<ButtonWrapper>
<SaveButton type="submit" buttonText="Register" disabled={!(values.terms && values.cookies)} />
</ButtonWrapper>
)
}}
</RegisterForm>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.