如何让 Formik 检测复选框字段被选中的情况？

Question

我正在制作一个需要验证的复选框组件（使用 完成Yup）。但它不会从复选框中检索实际值，而只是从内部的值中检索initialValues。

表格代码：

    <div className='metro custom-pg'>
      <ThemeContext.Provider theme={theme}>
        <Formik
          initialValues={{
            text: '',
            email: '',
            phone: '',
            select: '',
            multi: [],
            checkbox: false,
          }}
          validationSchema={Schema}
          onSubmit={(values) => {
            alert(JSON.stringify(values, null, 2));
            console.log("values", values);
          }}
        >
          {({
            errors,
            values,
            touched,
            handleSubmit,
            setFieldValue,
            setFieldTouched,
          }) => (
            <Form onSubmit={handleSubmit}>
              <Field
                id='text-field'
                label='Plain text'
                name='text'
                type='text'
                placeholder='Enter some characters'
                component={TextField}
              />
              <Field
                id='email-field'
                label='Email'
                name='email'
                type='email'
                placeholder='Enter your email'
                component={TextField}
              />
              <Field
                id='phone-email'
                label='Phone'
                name='phone'
                type='phone'
                placeholder='Enter your phone'
                component={TextField}
              />
              <Field
                id='select'
                name='select'
                name='select'
                label='Select an option'
                options={options}
                component={Select}
              />
              <MultiSelect
                id='multiselect'
                name='multi'
                label='Select multiple options'
                options={multiOptions}
                value={values.multi}
                onChange={setFieldValue}
                onBlur={setFieldTouched}
                touched={touched.multi}
                error={errors.multi}
              />
              <Field
                type="checkbox"
                name='check'
                id='check'
                label='Check the mark'
                component={Checkbox}
              />
              <Button variant="primary" type="submit">Submit</Button>
              </Form>
          )}
        </Formik>
      </ThemeContext.Provider>
    </div>

复选框代码：

// @flow
import * as React from "react";
import { Field, ErrorMessage } from 'formik';
import { FormGroup, FormLabel } from "react-bootstrap";

export type Props = {
  label?: String,
  id?: String,
  name?: String,
  disabled?: boolean,
  onChange: function,
  className?: string
};

export const Checkbox = ({ label, disabled, id, className }: Props) => {
  return (
    <FormGroup>
      <input type="checkbox" id={name} name={name} />
      <label htmlFor={name}> {label}</label>
      <ErrorMessage component="div" className="input-error" name="checkbox" />
    </FormGroup>
  );
};

Checkbox.defaultProps = {
  label: 'Default text',
  name: 'checkbox',
  disabled: false,
  className: ''

}

export default Checkbox;

Answer 1

您为Checkbox组件分配不同的名称：

代替：

 <Field
   type="checkbox"
   name='check'
   id='check'
   label='Check the mark'
   component={Checkbox}
/>

使用：

 <Field
   type="checkbox"
   name='checkbox'
   id='check'
   label='Check the mark'
   component={Checkbox}
/>

检查您的复选框现在是否有效。

并且不要忘记检查您的复选框是否正在更改值，我认为您应该实现setFieldValue内部Checkbox组件以将新值发送到 formik。

您可以在 Checkbox 的 props 中访问 setFieldValue 。

最终代码复选框将是：

//You need to include form and name in props.
export const Checkbox = ({ form, name, label, disabled, id, className }: Props) => {
  return (
    <FormGroup>
      // You need to include onChange
      <input type="checkbox" id={name} name={name} onChange={(e) => {form.setFieldValue(name,e.target.checked)}}/>
      <label htmlFor={name}> {label}</label>
      <ErrorMessage component="div" className="input-error" name="checkbox" />
    </FormGroup>
  );
};