Ввод теряет фокус при использовании пользовательского ввода для поля Formik в FieldArray - PullRequest
Новая
       6

Ввод теряет фокус при использовании пользовательского ввода для поля Formik в FieldArray

2 голосов
/ 11 марта 2020

Я использую пользовательские компоненты ввода для обработки данных формы и заметил странное поведение. Только когда я использую FieldArray с пользовательскими компонентами ввода, ввод теряет фокус при вводе.

Вот настройка формы: 

<Formik
  enableReinitialize
  initialValues={{ ...getInitialState() }}
  onSubmit={(values, actions) => {
    save(values, actions)
  }}
  validationSchema={schema}
  >
  {({ values, isSubmitting, setFieldValue, dirty }) => (
    ...
    <Images />
    ...
  )}
</Formik>

И внутри моего Images компонента 

import { imageState } from "states"
import Input from "form/input"

function Images() {
  ...
  return (
    <div className={styles.wrapper}>
        <FieldArray
          name="images.posters"
          render={({ form, push, remove }) => {
          const images = form.values.images.poster
          return (
            <>
              <button onClick={() => push(imageState)}>Add Poster</button>
              {images.map((image, index) => (
                <div key={index} className={styles.imageGroup}>
                  <Field //using custom input loses focus
                    name={`images.poster.${index}.src`}
                    component={Input} 
                  />
                 <Field //using Formik default component doesn't loose focus
                    name={`images.poster.${index}.src`}
                  />
                 <button onClick={() => remove(index)}>Remove Poster</button>
                </div>
              ))}
            </>
          )}}
      />
    </div>
  )
}

Есть ли другой способ использования пользовательских входов для FieldArray? У меня нет этой проблемы, когда я не использую FieldArray.

...