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

Question

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

问题:我尝试在条件渲染方面传递 props 和使用 if-else 语句，但由于忽略了其余的 if else 语句，我无法弄清楚如何正确地陈述功能工作的条件。只有 Beef 按钮有效，其余按钮无效。

源代码:

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 Prop 回调。

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>
  );
}