Реагировать на проблему переключения js, когда я захожу с мобильного

Я пытаюсь реагировать на мой дизайн. Моя логика заключается в том, что когда будет отображаться стиль div: «блок», он покажет корзину, а когда пользователь будет просматривать на мобильном устройстве, дисплей div не будет отображаться, и пользователю нужно нажать кнопку, чтобы открыть корзину.

Теперь проблема в том, что мое состояние по умолчанию истинно, поэтому, когда мобильный пользователь посещает веб-сайт, он сначала увидит корзину, которая мне не нужна. Я хочу, чтобы пользователь при первом посещении не видел корзину, которую ему нужно нажать на кнопку. Я не могу установить для состояния по умолчанию значение false, потому что пользователь рабочего стола не может видеть корзину.

// MY STATE
  const [toggle, setToggle] = useState(true);

<button onClick={() => setToggle(!toggle)}>Open</button>
<div
  className="box_order mobile_fixed"
  style={{ display: `${toggle ? "block" : "none"}` }}
  >
// BASKET CODE
</div>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
0
41
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Установите для состояния по умолчанию значение false и используйте обратный вызов useState.

// MY STATE
  const [toggle, setToggle] = useState(window.innerWidth > 700);

<button onClick={() => setToggle(toggleBefore => !toggleBefore)}>Open</button>
<div
  className="box_order mobile_fixed"
  style={{ display: toggle ? "block" : "none" }}
  >
// BASKET CODE
</div>

Не работает, :(

Jerin 09.04.2022 16:05

Вы можете установить значение переключателя по умолчанию в соответствии с размером экрана с помощью API медиа-запросов. И слушайте изменение размера экрана, которое мне нужно.

Пожалуйста, взгляните на этот ответ: Синтаксис медиазапроса для Reactjs

Ответ принят как подходящий

Вы можете использовать окно.matchMedia для установки начального значения состояния.

The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

Например:

const [toggle, setToggle] = useState(window.matchMedia("max-width: 768px").matches);

Спасибо, но когда я устанавливаю запрос matchMedia, он работает на мобильном телефоне, но не работает на рабочем столе. теперь по умолчанию setToggle имеет значение false, поэтому условный класс не отображается для рабочего стола.

Jerin 09.04.2022 16:00

@Jerin, я думаю, из-за того, что вы изменяете размер окна браузера, если вы покажете свою страницу в размерах рабочего стола и нажмете «Обновить», вы увидите, что это работает.

Mido Devi 09.04.2022 16:30

Вы используете tailwindcss? следуйте этому, чтобы добавить попутный ветер в свой проект через CDN https://tailwindcss.com/docs/installation/play-cdn.

Рефакторинг вашего className как ${toggle ? "hidden" : "block"} sm:block и удалить свойство стиля. В мобильном представлении div всегда будет скрыт. Он не будет отображать его как блок, потому что медиа-запрос sm:block будет отображать его как блок только тогда, когда размер экрана достигает ширины 768 и более. Это отобразит корзину только после того, как вы нажмете кнопку. Также используйте это соглашение для вашей функции setToggle setToggle(prevState => !prevState).

Я использую бутстрап :(

Jerin 09.04.2022 16:02

Если это так, попробуйте className=md-block ${toggle ? "d-none" : "d-block"}. Не забудьте удалить свойство стиля

MLDC 09.04.2022 16:10

мой плохой, верхний не работает ${toggle ? "d-none d-md-block" : "d-block d-md-none"}.

MLDC 09.04.2022 16:27

Другие вопросы по теме