Потеря фокуса при вводе пользовательского поля ввода React-Final-Form-Arrays

Я использую пользовательский компонент, чтобы показать поле ввода текста, ничего необычного, только базовый компонент.

const CustomTextField = ({ ...rest }) => {
  return <input {...rest} />;
};

Когда я пытаюсь использовать этот компонент внутри массива react-final-form-array, по какой-то причине я теряю фокус при вводе текста в поле ввода, я думаю, это из-за повторного рендеринга.

<Field
    name = {`${name}.lastName`}
    component = {({ input, meta, ...rest }) => {
      return (
        <CustomTextField {...input} type = "text" {...rest} />
      );
    }}
    placeholder = "Last Name"
  />

вот ссылка на полный код на codeandbox

Как вы можете видеть, «Имя» работает нормально, но «Фамилия» теряет фокус при наборе текста.

Как я могу решить эту проблему, любая помощь приветствуется

Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
143
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте это так:

const CustomTextField = (props) => {
  return <input {...props.input} />;
};

и

<Field 
   name = {`${name}.lastName`} 
   component = {CustomTextField}
   placeholder = "Last Name"
/>

Я этого не видел, если ваш ответ отлично подходит для OP

Nisharg Shah 23.12.2020 19:06

Другие вопросы по теме