React Hooks - ввод теряет фокус при вводе 1 символа

Я играю с React Hooks - переписываю форму, чтобы 9X_use-effect использовать концепции хуков. Все работает, как 9X_react-usememo ожидалось, за исключением того, что как 9X_react-component только я ввожу любой 1 символ во входные 9X_react-hooks данные, вход теряет фокус.

Я предполагаю, что 9X_use-reducer существует проблема, заключающаяся в том, что 9X_use-ref внешняя часть компонента не знает о внутренних 9X_react-dom изменениях в компоненте, но как мне решить 9X_use-effect эту проблему?

Вот хук useForm:

import React, { useState } from "react";

export default function useForm(defaultState, label) {
  const [state, setState] = useState(defaultState);

  const FormComponent = () => (
    
); return [state, FormComponent, setState]; }

Вот компонент, который 9X_react-component использует крючок:

function App() {
  const [formValue, Form, setFormValue] = useForm("San Francisco, CA", "Location");

  return (
    
      

{formValue}

); }

33
0
3
Общее количество ответов: 3

Ответ #1

Ответ на вопрос: React Hooks - ввод теряет фокус при вводе 1 символа

Ответ Kais устранит симптомы, но не устранит 9X_react-jsx причину. Он также не сработает, если есть 9X_use-ref несколько входов - какой из них должен тогда 9X_react-usememo автофокусироваться при повторном рендеринге?

Проблема 9X_use-effect возникает, когда вы определяете компонент 9X_use-effect (FormComponent) внутри области действия другой функции, которая 9X_use-effect вызывается при каждой визуализации вашего 9X_react компонента App. Это дает вам совершенно новый 9X_react-jsx FormComponent каждый раз, когда ваш компонент App повторно 9X_use-reducer отрисовывается и вызывает useState. Тогда этот новый 9X_react-component компонент, ну, не в фокусе.

Лично я бы почувствовал, что 9X_usecallback компоненты возвращаются из крючка. Вместо 9X_usecallback этого я бы определил компонент FormComponent и возвращал 9X_react-dom бы состояние только из состояния useForm.

Но 9X_usecallback рабочий пример, наиболее близкий к исходному 9X_usecallback коду, может быть:

// useForm.js
import React, { useState } from "react";

// Define the FormComponent outside of your useForm hook
const FormComponent = ({ setState, state, label }) => (
  
    
  
);

export default function useForm(defaultState, label) {
  const [state, setState] = useState(defaultState);

  return [
    state,
    ,
    setState
  ];
}
// App.js
import useForm from "./useForm";

export default function App() {
  const [formValue, Form] = useForm("San Francisco, CA", "Location");

  return (
    <>
      

{formValue}

{Form} ); }

Here's a sandbox

36
2

  • Это должен быть ответ.< ...

Ответ #2

Ответ на вопрос: React Hooks - ввод теряет фокус при вводе 1 символа

При вводе любого текста в поле ввода. Родительский 9X_react-component компонент также выполняет повторный рендеринг. Поэтому 9X_react-jsx вам нужно сосредоточиться на вводе вручную. Для 9X_react-usememo этого используйте autoFocus во входном теге

 setState(e.target.value)}
  autoFocus
/>

19
1

  • На данный момент это лучший ответ, в моем случае у м ...

Ответ #3

Ответ на вопрос: React Hooks - ввод теряет фокус при вводе 1 символа

Приведенные выше ответы не помогли мне. Решение, которое 9X_react-dom сработало для меня, было намного проще и 9X_react-jsx по этой причине менее очевидным.

Проблема По сути, значение, которое 9X_react-usememo я изменял с помощью ввода, также использовалось 9X_react-dom для каждого key в списке входов.

Следовательно, когда 9X_use-ref я обновляю значение, key изменится, и React 9X_use-reducer обнаружит, что оно отличается от последнего 9X_react-usememo ключа, и создаст новый ввод вместо него. В 9X_use-state качестве нового ввода он не будет фокусироваться 9X_react-usememo на себе.

Однако при использовании autoFocus он автоматически 9X_use-effect фокусируется на вновь созданном вводе. Но 9X_react-usememo проблема не была устранена, поскольку было 9X_react-usememo очевидно, что ввод постоянно проходил цикл 9X_useimperativeref расфокусировки и фокусировки.

Вот article demonstrating проблема.

Решение

Обновите 9X_react-component key до неизменяемого значения, чтобы React 9X_use-reducer имел стабильную ссылку на элементы списка. В 9X_react-component моем случае я просто обновил его до index. Это 9X_react-hooks не идеально (React docs рекомендует использовать стабильный 9X_react идентификатор), но в моей ситуации это было 9X_usecallback нормально, потому что порядок элементов 9X_useimperativeref не изменится.

6
0