• ReactJS Где хранить state статуса модального окна(Как правильно, чтобы не был говнокод)?

    Хорошо, что вы задались этим вопросом!Вы думаете в верном направлении.
    Начнем с того, что держать state в main компоненте, плохая практика, при его изменении будет происходить перерендер всех дочерних компонентов по умолчанию и вам придется подтирать за собой - сравнивая пропсы,
    там где это не нужно и где вы даже ничего не принимаете (например в любых контейнерах).
    Для этого есть store, той самой flux архитектуры которой вы пользуетесь. С этим мы поняли, да.

    Далее нужно определиться, что вообще у вас за модальное окно?

    Если оно у вас по типу - что-бы что-то сделать в приложении зарегистрируйтесь, и вылетает модалка , куда бы не нажали. То переиспользовать его уже становится бессмысленным, оно должно быть одно на верхнем уровне, так как это уже глобальное представление, а не плодить кучу в каждом компоненте, где есть обработка любых событий связанных с функционалом приложения напрямую. Тем более что ваш компонент, в таком случае с филосовской точки зрения , ничего не знает ни про какие модальные окна и знать не хочет, он отвечает за представление самого-себя любимого.
    Поэтому вы решаете засунуть в store - reducer modalWindow с значением - show : false/true и диспачите экшен из любого компонента если нужно показывать/скрывать его.
    Повторюсь в данном кейсе модальное окно ОДНО логически их не может быть куча, тем более, что конкретно к компонентам оно никакого отношения не имеет.

    Если оно имеет прямое отношение к вашему компоненту вы хотите и можете его переиспользовать, меняя текст и прочую чепуху, прокидывая true/false и callback через пропсы, храня их в состоянии компонента, к которому это все относится. Но чаще всего это даже не модальные окна, а подсказки которые показывают дополнительную информацию, связанную с компонентом.

    Если это алерты по типу - success, warning, error, которые вылетают где-то внизу (например ) в углу,
    Вы могли бы их также переиспользовать, до момента пока пользователь не нажмет сразу же на эту/другую кнопку и не получит новое сообщение до того как пропало прежнее, и тут вам снова нужно выносить список алертов, которые в настоящее время активны в store, и складывать их в список в том же углу, удаляя и добавляя их, чтобы пользователь успевал читать, что именно ему "кричат".

    Всегда думайте , нужно ли то что я пишу здесь, или может оно должно быть в другом месте.
    С одной стороны создается впечатление, что создав state в main компоненте вы облегчите долю приложения, вместо того чтобы создавать лишний reducer, но как показывает практика это не так.
    Ответ написан
    Комментировать
  • Как отключить скролл страници при фокусе определенного элемента?

    neuotq
    @neuotq
    Прокрастинация
    Вам нужно следить за событиями keydown, далее снимаем действие по умолчанию с помощью preventDefault.
    Таким образом в самом общем случае отключения реакции на все кнопки будет:

    document.addEventListener('keydown', e => {
      e.preventDefault();
      return false;
    });


    Далее ищите нужные коды для своих кнопок, отключаете поведение по умлочанию, добавляете своё поведение.
    Например:

    document.addEventListener('keydown', e => {
       if (e.key === 'ArrowDown') {
        e.preventDefault();
        //Ваша логика
        return false;
      }
    });
    Ответ написан
    Комментировать