如何解決餐廳網站按鈕覆蓋層顯示問題

Question

我在使用React.js建立餐廳網站上的按鈕時遇到了問題，無法正確顯示疊加頁面。它們在自己的元件(MenuButtons.jsx)中設置，並位於前頁較短選單部分的底部(見下圖)。我希望它們能夠為菜單的其餘部分(例如葡萄酒列表、午餐菜單等)啟動單獨的疊加頁面，因為完整的菜單太長，無法全部包含在前頁上。下圖顯示了葡萄酒清單疊加頁面的樣子。

以下是程式碼：

import React, { useState } from "react";
   import WinesOverlay from 
   "../../components/WinesOverlay/WinesOverlay";

const MenuButtons = () => {
  const [overlay, setOverlay] = useState(null);
  const renderOverlay = (value) => {
    if (!value) {
      return;
    } else if (value === "wines") {
      return (
        <div className="app__specialMenu-smallscreen">
          <WinesOverlay />
        </div>
      );
    }
  };

  return (
    <div className="app__specialMenu-buttons">
      <button
        onClick={(renderOverlay) => setOverlay("wines")}
        type="button"
        className="custom__button"
      >
        WINES
      </button>

      <button type="button" className="custom__button">
        SPIRITS & LIQUEURS
      </button>

      <button type="button" className="custom__button">
        LUNCH MENU
      </button>

      <button type="button" className="custom__button">
        DINNER MENU
      </button>

      <button type="button" className="custom__button">
        SOFT DRINKS
      </button>

      <button type="button" className="custom__button">
        BEVERAGES
      </button>
    </div>
  );
};

export default MenuButtons;

餐廳網站前頁菜單部分

餐廳網站葡萄酒清單疊加頁面

我嘗試重新使用導覽列部分的一些程式碼(該導覽列從前頁頂部的漢堡選單啟動單一疊加頁面)來導入葡萄酒列表作為組件(見下圖第一張截圖)。這對於第一個按鈕(葡萄酒)有效，但當我嘗試複製代碼到第二個按鈕(烈酒和利口酒)時，葡萄酒和烈酒/利口酒按鈕的疊加頁面都顯示了烈酒和利口酒組件的內容。

選單按鈕程式碼-錯誤

有人建議我重寫MenuButtons.jsx程式碼如下(見下圖第二張截圖)： 1: 在元件頂部宣告狀態(第5行)：const [overlay, setOverlay] = useState(null); 2: 建立一個元件，該元件接收字串"wines"作為屬性，根據狀態中設定的字串渲染WinesOverlay元件(第6-14行)。 3: 將"label"設定為"wines"的onClick處理程序(第21行)。

不確定我是否正確編寫了MenuButtons.jsx中的程式碼，或者是否按正確的順序。但是葡萄酒按鈕不起作用，所以我不知道重寫的程式碼是否更接近所需的效果。

如果我能讓第一個按鈕正常工作，其他的應該相對簡單。非常感謝任何建議。

選單按鈕程式碼-目前

Answer 1

在使用onClick時，似乎你沒有將'value'傳遞給renderOverlay，而且你錯誤地聲明了Wines按鈕的onClick。 你使用了一個內聯箭頭函數，它只是將你的overlay值更新為"wines"，並沒有在任何地方呼叫renderOverlay。 {(rendeOverlay) => ... 這裡將函數當作參數傳遞，而不是呼叫它。 請像這樣進行修正。

<button
   onClick={() => {
      renderOverlay("wines");
   }} />

如有任何疑問，請告訴我。