Как заставить Formik обнаруживать, когда флажок установлен? - PullRequest
Новая
       5

Как заставить Formik обнаруживать, когда флажок установлен?

1 голос
/ 21 апреля 2020

Я создаю флажок компонента , который нуждается в проверке (сделано с 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;

Ответы [ 2 ]

3 голосов
/ 21 апреля 2020

Чтобы дополнить ответ Адриана Наранхо, вы реализуете обратный вызов Formik «onChange» для флажка. 

<Formik
 initialValues={{ ... }}
 validationSchema={Schema}
 onSubmit={(values) => { ... }}
>
{
  ({ handleChange, ...rest } => {

Вам необходимо передать это handleChange в ваш Checkbox компонент.

* 1007 Компонент * Formik Field сделает доступным обратный вызов onChange, после чего вы сможете передать его на <input type="checkbox" />.

https://jaredpalmer.com/formik/docs/api/field

2 голосов
/ 21 апреля 2020

Вы назначаете другое имя для 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.

Вы можете получить доступ к setFieldValue в реквизитах Checkbox.

Окончательный код Checkbox будет: 

//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>
  );
};
...