Реагировать на проблему переключения 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>
Ответы 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>
Вы можете установить значение переключателя по умолчанию в соответствии с размером экрана с помощью 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, я думаю, из-за того, что вы изменяете размер окна браузера, если вы покажете свою страницу в размерах рабочего стола и нажмете «Обновить», вы увидите, что это работает.
Вы используете tailwindcss? следуйте этому, чтобы добавить попутный ветер в свой проект через CDN https://tailwindcss.com/docs/installation/play-cdn.
Рефакторинг вашего className как ${toggle ? "hidden" : "block"} sm:block и удалить свойство стиля. В мобильном представлении div всегда будет скрыт. Он не будет отображать его как блок, потому что медиа-запрос sm:block будет отображать его как блок только тогда, когда размер экрана достигает ширины 768 и более. Это отобразит корзину только после того, как вы нажмете кнопку. Также используйте это соглашение для вашей функции setToggle setToggle(prevState => !prevState).
Я использую бутстрап :(
Если это так, попробуйте className=md-block ${toggle ? "d-none" : "d-block"}. Не забудьте удалить свойство стиля
мой плохой, верхний не работает ${toggle ? "d-none d-md-block" : "d-block d-md-none"}.
Не работает, :(