Поле ввода при каждом входе выходит из фокуса

Question

Ошибка возникает при двух обстоятельствах:

1. Если вход имеет onChange

2. Если вход находится в компоненте, который вызывается на другой странице

Например:

На Page1.js имеем:

return <div> <Page2 /> </div>

На Page2.js имеем:

const [customState, customSetState] = useState({
   customText: ''
});

return <input value={customState.customText} onChange={setCustomStateText} />

function setCustomStateText(event) {
customSetState({
   ...customState,
   customText: event.target.value
 });
}

Ошибка исчезает, когда Page1 не вызывает Page2, а просто имеет обычный элемент ввода, она также исчезает, когда мы удаляем onChange.

Есть идеи?

Answer 1

Я полагаю, что ваш вход для каждого рендера был воссоздан.

Как насчет того, чтобы использовать useRef hook, поскольку документация гласит:

useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращенный объект будет сохраняться в течение всего времени жизни компонента.

Как показано ниже:

const inputEl = useRef(null);
const [customState, customSetState] = useState({
   customText: ''
});

return <input ref={inputEl} value={customState.customText} onChange={setCustomStateText} />

Другая проблема, которую я вижу там, которая может вызвать дальнейшие проблемы, не является мутацией предыдущее состояние. Я предлагаю использовать следующее:

function setCustomStateText(event) {
   customSetState(prevState => {
      return {
         ...prevState,
         customText: event.target.value
      }
   });
}

Поскольку в документации говорится о setState():

setState() не всегда сразу обновляет составная часть. Это может пакетировать или отложить обновление до позже. Это делает чтение this.state сразу после вызова setState () потенциальной ошибкой.

Надеюсь, это поможет!

Answer 2

Быстрое решение с props.children, не лучшее решение, но оно работает. Если кто-нибудь найдет лучшее решение, дайте мне знать. Если вы устанавливаете условный рендеринг внутри компонента, используйте props.children для установки рендеринга в другом файле.