#javascript #css #reactjs #typescript #focus
Вопрос:
Я использую react и сделал боковую панель, которая анимируется на экране и за его пределами, но абсолютное положение и изменение css right div. Вот песочница для легкой настройки кода.
Поэтому, когда вы нажимаете на синее поле, оно должно исчезнуть с экрана, установив right отрицательное значение, а розовое поле должно появиться, установив значение right 0 . Как вы можете видеть, это не работает.
но
Если вы удалите весь код popout.tsx useEffect, то все будет работать так, как ожидалось. Код useEffect отвечает за фокусировку и размытие ввода текста на боковой панели в зависимости от состояния isOpen.
Спасибо!
Редактировать
Если вы хотите узнать, какое поведение ожидается, пожалуйста, прокомментируйте весь эффект использования в файле popout.tsx . Это ожидаемое поведение розовая коробка из ввода сфокусирована розовая коробка исчезла вход размыт.
Идея всего этого в том, что в синем поле будет текст «Нажми на меня», а розовое поле откроется из-за этого или с помощью привязки клавиш. Оба эти действия должны быть сосредоточены на вводе текста внутри.
Немного Дополнительной Информации
Существует также привязка клавиш, если вы нажмете ctl ~ , появится розовое поле, поэтому мне нужно изменить фокус в зависимости от состояния isOpem, а не нажимать события.
Комментарии:
1. Но розовая коробка предназначена для возврата, как только ввод будет сфокусирован, верно ?
2. нет, когда розовое поле находится на экране, ввод должен быть сфокусирован, а когда розовый цвет отсутствует на экране, он должен быть размытым.
3. Но в настоящее время розовое поле закрывается, когда ввод сфокусирован
4. Я закодировал его так, чтобы, когда вы нажимаете на розовое поле даже при вводе(поскольку ввод-это поле), оно закрывает розовое поле. Дело не в этом, хотя я хочу, чтобы он автоматически фокусировался, когда открывается розовая коробка. Так что, как вы можете видеть в useEffect, я ищу изменения в открываемой опоре и в зависимости от этой опоры устанавливаю фокус в коде. Вы можете видеть, что розовое поле появляется, когда оно сфокусировано, а когда закрыто, оно размыто просто потому, что розовое поле выходит слишком сильно, а не правильно : 0 пикселей, как указано в css. я неправильно понял ваш вопрос, но мы не хотим сосредотачиваться на вводе, нажимая на него, что приведет к закрытию
5. обычно мы закрывали бы розовое поле, используя на нем крестовую кнопку, но сейчас для простоты я поместил обработчик щелчков на все это.
Ответ №1:
Проблема в том, что вам нужно использовать position: fixed вместо position: absolute .