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

reactjs

react-hooks
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