单击三个按钮之一后如何显示特定按钮的内容？ 单击其中一个按钮后应隐藏所有按钮

Question

目标：单击三个按钮之一后，我应该显示特定按钮的具体内容。 然后，在单击特定按钮后，所有三个按钮都应隐藏并替换为单击的特定按钮的内容。

问题：我尝试在条件渲染方面传递道具并使用 if-else 语句，但我无法弄清楚如何正确地 state 为功能工作的条件，因为其余的 if else 语句被忽略。 只有牛肉按钮起作用，但按钮的 rest 不起作用。

源代码：

import * as React from "react";
import { Stack } from '@mui/material';
import FoodTraysItemButton from "./FoodTraysItemButton";
import PastaNoodlesButtonsFT from "./foodTraysPages/PastaNoodlesButtonsFT";
import DessertsButtonsFT from "./foodTraysPages/DessertsButtonsFT";
import BeefButtonsFT from "./foodTraysPages/BeefButtonsFT";
import { useState } from "react";

function preventDefault(event) {
  event.preventDefault();
}

export default function FoodTraysButtons(props) {
  const [myBoolBeef, setmyBoolBeef] = useState(true);
  const [myBoolDesserts, setmyBoolDesserts] = useState(true);
  const [myBoolPastaNoodles, setmyBoolPastaNoodles] = useState(true);
  
   function toggleBoolBeef() {
     setmyBoolBeef(!myBoolBeef);
   }

    function toggleBoolDesserts() {
      setmyBoolDesserts(!myBoolDesserts);
    } 

    function toggleBoolPastaNoodles() {
      setmyBoolPastaNoodles(!myBoolPastaNoodles);
    }

  return (
    // stuck here:   (I plan to use multiple separate if else statements to work the functionality out but it doesn't work)
    <React.Fragment> 
     {(() => {
         // only works here
        if (myBoolBeef) {
          return (<Landing toggleBoolBeef={toggleBoolBeef} />);
        } else{
          return <BeefFT/>;
        }
      
// these are ignored:
        if (myBoolDesserts) {
          return (<Landing toggleBoolDesserts={toggleBoolDesserts} />);
        } else{
          return <DessertsFT/>;
        } 

        if (myBoolPastaNoodles) {
          return (<Landing toggleBoolPastaNoodles={toggleBoolPastaNoodles} />);
        } else{
          return <PastaNoodlesFT/>;
        } 


      })()}
    </React.Fragment>
  );

}

function Landing(props) {
  return (
    <div>
      <Stack spacing={0} direction="row" sx={{ mb: 4.5 }}>
        <FoodTraysItemButton
          title="Beef"
          onClick={props.toggleBoolBeef}
        />
      
        <FoodTraysItemButton
          title="Desserts"
          onClick={props.toggleBoolDesserts}
        />
        <FoodTraysItemButton title="Pasta/Noodles" onClick={props.toggleBoolPastaNoodles} />
      
      </Stack>
     

    </div>
  );
}

function BeefFT() {
  return (
    <div>
      <BeefButtonsFT />
    </div>
  );
}


function DessertsFT() {
  return (
    <div>
      <DessertsButtonsFT />
    </div>
  );
}

function PastaNoodlesFT() {
  return (
    <div>
      <PastaNoodlesButtonsFT />
    </div>
  );
}

Codesandbox 中的完整源代码： https://codesandbox.io/s/show-hide-buttons-ralph-ecv9g2?file=/src/FoodTraysButtons.jsx:773-815

它应该是什么样子：

牛肉按钮：

甜点按钮：

意大利面按钮：

我应该以什么方式实现它以实现其功能？

当我目前正在探索 MUI 和 React 时，您的回复将不胜感激。 这对我的项目将是一个非常大的帮助。 非常感谢！！！

Answer 1

更新FoodTraysButtons以保存单个selection ，然后用于有条件地渲染Landing组件或BeefFT 、 DessertsFT或PastaNoodlesFT组件中的任何一个组件。

export default function FoodTraysButtons(props) {
  const [selection, setSelection] = useState();

  const selectHandler = (selection) => setSelection(selection);

  return (
    <React.Fragment>
      {!selection && <Landing onSelect={selectHandler} />}
      {selection === "beef" && <BeefFT />}
      {selection === "dessets" && <DessertsFT />}
      {selection === "pastaNoodles" && <PastaNoodlesFT />}
    </React.Fragment>
  );
}

更新Landing组件以采用单个onSelect道具回调。

function Landing({ onSelect }) {
  const selectHandler = (selection) => () => onSelect(selection);
  return (
    <div>
      <Stack spacing={0} direction="row" sx={{ mb: 4.5 }}>
        <FoodTraysItemButton title="Beef" onClick={selectHandler("beef")} />
        <FoodTraysItemButton
          title="Desserts"
          onClick={selectHandler("desserts")}
        />
        <FoodTraysItemButton
          title="Pasta/Noodles"
          onClick={selectHandler("pastaNoodles")}
        />
      </Stack>
    </div>
  );
}

Answer 2

您需要一个开关盒块而不是多个 boolean 值 state。 考虑这种构建代码的方式：

const menuState = {
  NONE: "none",
  BEEF: "beef",
  DESSERTS: "desserts",
  PASTA: "pasta"
};

export default function FoodTraysButtons(props) {
  const [selectedMenu, setSelectedMenu] = useState(menuState.NONE);

  const renderMenu = () => {
    switch (selectedMenu) {
      case menuState.BEEF:
        return <BeefFT />;
      case menuState.DESSERTS:
        return <DessertsFT />;
      case menuState.PASTA:
        return <PastaNoodlesFT />;
      case menuState.NONE:
      default:
        return null;
    }
  };

  return (
    <React.Fragment>
      {selectedMenu === menuState.NONE && (
        <Landing setSelectedMenu={setSelectedMenu} />
      )}
      {renderMenu()}
    </React.Fragment>
  );
}

function Landing(props) {
  return (
    <div>
      <Stack spacing={0} direction="row" sx={{ mb: 4.5 }}>
        <FoodTraysItemButton
          title="Beef"
          onClick={() => props.setSelectedMenu(menuState.BEEF)}
        />

        <FoodTraysItemButton
          title="Desserts"
          onClick={() => props.setSelectedMenu(menuState.DESSERTS)}
        />
        <FoodTraysItemButton
          title="Pasta/Noodles"
          onClick={() => props.setSelectedMenu(menuState.PASTA)}
        />
      </Stack>
    </div>
  );
}

工作演示：

注意：如果您想始终显示按钮菜单，请删除selectedMenu === menuState.NONE包装条件。