> Почему в React компоненте при вводе текста последний символ пропадает (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One

Стек: React

> Пример ответа

Скорее всего, вы используете неконтролируемый компонент (uncontrolled component) с defaultValue, а не контролируемый с value и onChange. В React, если вы задаёте value для <input> без обработчика onChange, компонент становится контролируемым, но React блокирует обновление состояния - ввод текста не синхронизируется, и последний символ может «пропадать» при ререндере.

Решение: Используйте контролируемый компонент с явным управлением состоянием:

JSX
const [text, setText] = useState('');

return <input value={text} onChange={(e) => setText(e.target.value)} />;

Если же вы используете defaultValue, то значение устанавливается только при монтировании, и React не отслеживает изменения - в таком случае последний символ не пропадает, но вы теряете контроль над значением. Убедитесь, что вы не смешиваете value и defaultValue в одном инпуте.