Отображать поля ввода из списка имен полей с помощью formik - PullRequest
Новая
       6

Отображать поля ввода из списка имен полей с помощью formik

0 голосов
/ 20 января 2020

У меня есть список имен полей формы, например, list = ["orgName", "addressLine1"], и список может быть любой длины.

Я пытался отобразить форму, используя formik, но выдает ошибку

Компонент изменяет неконтролируемый ввод текста типа для управления. Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот). Выберите между использованием контролируемого или неконтролируемого входного элемента в течение срока службы компонента. Больше информации: 

// @flow
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

import { StyledInput } from "../StyledInput";
import { Span } from "../Span";
import { Title } from "../Title";
import { SubmitButton } from "../Submit";

const OrgSignupSchema = Yup.object().shape({
  orgName: Yup.string().required("org name is required"),
  addressLine1: Yup.string(),
  addressLine2: Yup.string(),
  state: Yup.string(),
  city: Yup.string(),
  pin: Yup.string(),
  country: Yup.string(),
  maintainerId: Yup.string()
});

interface OrgSignupPayload {
  orgName: string;
  addressLine1?: string;
  addressLine2?: string;
  state?: string;
  city?: string;
  pin?: string;
  country?: string;
  maintainerId?: string;
}

interface IOrgSignupProps {
  title?: string;
  onSubmit: (val: OrgSignupPayload) => void;
}

export const OrgSignupForm = ({ title, onSubmit }: IOrgSignupProps) => {

  // These fields i want to render
  const fields = ["orgName", "addressLine1"];

  const initialState: OrgSignupPayload = {
    orgName: ""
  };

  return (
    <>
      {title && <Title>{title}</Title>}
      <Formik
        initialValues={initialState}
        validationSchema={OrgSignupSchema}
        onSubmit={(val: OrgSignupPayload) => {
          return onSubmit(val);
        }}
      >
        {({
          errors,
          values,
          handleSubmit,
          handleChange,
          touched,
          handleBlur
        }) => (
          <Form onSubmit={formVal => handleSubmit(formVal)}>
            {fields && fields.length
              ? fields.map((name, index) => (
                  <React.Fragment key={name}>
                    <Field name={name}>
                      {innerProps => {
                        return (
                          <>
                            <StyledInput
                              {...innerProps.field}
                              title={name}
                              type="text"
                            />
                            {innerProps.form.touched[name] &&
                              innerProps.form.errors[name] && (
                                <Span small red>
                                  {innerProps.form.errors[name]}
                                </Span>
                              )}
                          </>
                        );
                      }}
                    </Field>
                  </React.Fragment>
                ))
              : null}

            <br />
            <br />
            <SubmitButton type="submit" rounded>
              Submit
            </SubmitButton>
          </Form>
        )}
      </Formik>
    </>
  );
};

Не, где я делаю неправильно.

1 Ответ

0 голосов
/ 20 января 2020

Вы не устанавливаете значения по умолчанию для своих входов и не используете handleChange для обновления каких-либо значений из стилизованных входов.

Вы должны задать для контролируемых входов значение по умолчанию (то есть value={values.orgName}), и убедитесь, что у них есть обработчик изменений. С formik это так же просто, как onChange={handleChange}, как только вы введете ie значение вашего входа в соответствующее значение в values. Если вы не даете своему входному значению значение, его значение не определено, и реакция интерпретирует его как неконтролируемый компонент .

См. Эту ветку github для подробностей относительно вашей точно такой же проблемы с кем-то используя подход с шаблоном withFormik HO C: https://github.com/jaredpalmer/formik/issues/28

Я также рекомендовал бы использовать шаблон withFormik HO C, так как я обнаружил, что его легче отлаживать и много меньше загромождено: https://jaredpalmer.com/formik/docs/api/withFormik

...