Реакция ввода, теряющая фокус при передаче значения пропущенного через атрибут «компонент» Маршрутизатора - PullRequest
Новая
       19

Реакция ввода, теряющая фокус при передаче значения пропущенного через атрибут «компонент» Маршрутизатора

0 голосов
/ 10 февраля 2020

с большим пердением мозга сегодня. Я пробовал кучу вариантов решения этой проблемы, но безрезультатно. Это неделя для меня и моего мозга, так что я уверен, что мне просто не хватает чего-то глупого.

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

Мне нужно, чтобы значение имени пользователя было сохранено в компоненте приложения.

Я предполагаю, что это связано с атрибутом Route "component" возвращая функцию, но я не совсем уверен. Я также попытался добавить ключевую подпорку в различные места приложения, но не повезло.

Вот ссылка на разветвленный проект коды и ящик.

И это я предполагаю, что что-то происходит. 

component={() => (
  <Input value={username} handleValueChange={handleUserNameChange} />
)}

1 Ответ

1 голос
/ 10 февраля 2020

Попробуйте вместо component использовать рендер . В документации для component упоминается, что компонент будет перемонтироваться / заново создаваться при каждом рендеринге, поэтому вы теряете фокус:

Когда вы используете компонент (вместо render или children, ниже) маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для компонента prop, вы будете создавать новый компонент при каждом рендере. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте рендер или дочернюю опору (ниже). 

<Route
  exact
  path="/input"
  render={() => (
    <Input
      key={"foo"}
      value={username}
      handleValueChange={handleUserNameChange}
    />
  )}
/>

Вот пример в действии.

...