Formik FieldArray потерял фокус при срабатывании «onChange» - PullRequest
Новая
       6

Formik FieldArray потерял фокус при срабатывании «onChange»

0 голосов
/ 27 сентября 2018

Я следовал учебнику из статьи, написанной членом команды Formik Но все работает не так, как ожидалось;всякий раз, когда я что-то набираю в поле ввода текста, при каждом нажатии клавиши он теряет фокус, снова и снова, я должен щелкнуть поле ввода текста, чтобы написать следующий символ.Я поделился ссылкой codesandbox .

вот код взят из статьи 

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';

export const InviteFriends = () => (
  <div>
    <h1>Invite Friends</h1>
    <Formik
      initialValues={{ friends: ['', '', ''] }}
      onSubmit={values => alert(values)}
      render={formikProps => (
        <Form>
          <Field name="email" />
          <FieldArray
            name="friends"
            render={({ remove, push }) => (
              <>
                {formikProps.values.friends.map((friend, i) => (
                  <div key={`friend-${i}-${friend}`}>
                    <Field name={`friends[${i}]`} type="email" />
                    <button type="button" onClick={() => remove(i)}>
                      X
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => push('')}>
                  Add friend
                </button>
              </>
            )}
          />
          <button type="submit">Invite Friends</button>
        </Form>
      )}
    />
  </div>
);

1 Ответ

0 голосов
/ 10 октября 2018

Проблема в вашем коде находится в шаблоне ключевого свойства: key={'friend-${i}-${friend}'}.Этот ключ должен быть постоянным для того же компонента при смене реквизита.Тем не менее, в вашем случае он включает ${friend}, что означает, что клавиша меняется с каждым нажатием клавиши.

Решение: Просто удалите ${friend} из своего ключа, чтобы сделать его постоянным для того же элемента.

...