Javascript 启用和禁用带有复选框的提交按钮

我正在使用Formik来创建我的React表单，我也很新，我有一个带有两个复选框的表单和一个默认禁用的提交按钮。我需要找到一种方法来检查复选框是否被选中。如果选中了所有两个复选框，则“提交”按钮处于启用状态，如果未选中任何复选框，则“提交”按钮处于禁用状态

我的代码：

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

import React，{useffect，forwardRef，useImperialiveHandle}来自“React”；
从'Formik'导入{Formik}；
功能FormikWithRef（道具，ref）{
设formikPropObj={}；
使用命令式处理（ref，（）=>formikPropObj）；
useffect（（）=>{
if（props.refSetter&&props.invokable）
道具({
参考：参考电流，
invokableFunction:props.invokable，
});
}, []);
返回(
{（formikProps）=>{
formikPropObj=formikProps；
if（props.children的类型=='function'）{
返回道具。子道具（formikProps）；
}
返回道具。儿童；
}}
);
}
导出默认forwardRef（FormikWithRef）；

注册执行：

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“/FormikWithRef”导入FormikWithRef；
常量注册表执行=({
formRef，
内参，
儿童
初始值，
验证模式，
提交时，
启用重新初始化，
登上，
最初的感动，
可调用，
refSetter，
}) => {
返回(
{（道具）=>(
{儿童}
)}
);
};
RegisterForm.propTypes={
formRef:PropTypes.object，
子级：PropTypes.oneOfType（[PropTypes.arrayOf（PropTypes.node）），PropTypes.node]），
初始值：PropTypes.object，
validationSchema:PropTypes.oneOfType（[PropTypes.object，PropTypes.func]），
onSubmit:PropTypes.func，
启用重新初始化：PropTypes.bool，
validateOnMount:PropTypes.bool，
initialTouched:PropTypes.object，
internalRef:PropTypes.func，
handleSubmit:PropTypes.func，
可调用：PropTypes.func，
refSetter:PropTypes.func，
};
RegisterForm.defaultProps={
formRef:null，
children:null，
初始值：{}，
validationSchema:null，
onSubmit:（）=>{}，
启用重新初始化：false，
验证装载：错误，
初始值：{}，
internalRef:null，
handleSubmit:null，
可调用：null，
refSetter:null，
};
出口违约登记；

寄存器组件：

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;

import React，{useState，useRef}来自“React”；
从“/Registerform”导入Registerform；
从“/useUserApi”导入useUserApi；
常量注册表执行=（）=>{
const[submiting，setSubmitting]=使用状态（false）；
const[isSubmitted，setIsSubmitted]=useState（false）；
const[disableSubmit，setDisableSubmit]=useState（true）；
const formRef=useRef（）；
常量初始值={
曲奇：错，
术语：假，
};
const{register}=useUserApi（）；
const submitRegisterForm=async（值）=>{
常数体={
术语：值？术语| |空，
cookies:值？.cookies | | null，
};
const res=等待寄存器（主体）；
返回res；
};
const onFormSubmit=async（值，{setErrors}）=>{
设置提交（真）；
const result=等待提交注册表（值）；
if（结果和！（等待检查错误（结果）））{
设置提交（假）；
setIsSubmitted（true）；
返回true；
}
如果（result.status==500）
setErrors（'提交表单时出现问题'）；
setIsSubmitted（false）；
设置提交（假）；
返回false；
};
useffect（（）=>{
如果（提交）{
const historyScreen=reverse（`routes.users}`）；
history.push（历史屏幕）；
}
}，[提交]；
返回初始值(
)：null；
}
出口违约登记；

您需要公开注册表中的值。我假设

道具

也应该有

值

。因此，请按如下所示更改代码

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

---

您是否也可以为RegisterForm添加代码？如果您使用的是Formik组件，这很容易做到，但看起来您在Formik上有一个包装器。是的，我肯定可以做到。我刚刚添加了@Shyam

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