在FieldArray中为Formik字段使用自定义输入时,输入失去焦点

时间:2020-03-11 07:40:24

标签: reactjs react-hooks formik

我正在使用自定义输入组件来处理表单数据,并且注意到奇怪的行为。仅当我将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时,我没有遇到这个问题。

0 个答案:

没有答案