当我从手机访问时反应 js 切换问题

Question

我正在尝试响应我的设计。我的逻辑是当显示 div 样式时："block" 它将显示一个篮子，当用户在移动设备上浏览时 div 显示将是 none 并且用户需要点击按钮打开购物篮。

现在的问题是我的默认状态为真，这就是为什么当移动用户访问该网站时，他首先会看到一个我不想要的篮子。我想要什么时候用户将首先访问他不会看到他需要单击按钮的篮子。我无法将默认状态设置为 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>

Answer 1

将默认状态设置为 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>

Answer 2

您可以使用媒体查询api根据屏幕大小设置切换的默认值。并聆听您需要的屏幕尺寸变化。

请看一下这个回复：

Answer 3

您可以使用window.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);

Answer 4

您在使用 tailwindcss 吗？按照此操作通过 CDN https://tailwindcss.com/docs/installation/play-cdn.

为您的项目添加顺风

像 ${toggle ? "hidden" : "block"} sm:block 一样重构您的类名并删除您的样式属性。在移动视图中，div 将始终隐藏。它不会将其显示为块，因为媒体查询 sm:block 只会在屏幕尺寸达到 768 宽度及以上时将其显示为块。这只会在您单击按钮后显示购物篮。也将此约定用于您的 setToggle 函数 setToggle(prevState => !prevState).

当我从手机访问时反应 js 切换问题

react js toggle problem when I visit from mobile

javascript

css

toggle

typescript

reactjs