React中点击Recipe按钮时两个食谱同时显示的问题求助

我想要实现点击不同的Recipe按钮时分别展示对应的两款食谱，但目前点击任意一个按钮都会同时显示两个食谱，不知道如何修正该问题。

相关代码 #

第一个卡片代码

// First Card
<Card style={{ width: '18rem' }} className="Chicken">
    <Card.Img variant="top" src={chicken} className="Fav_image" />
    <Card.Body>
        <Card.Title className="Fav_title">Chicken Paprakash</Card.Title>
        <Card.Text className="Fav_text">
            This is one of my favourite fall/winter recipes to make.
        </Card.Text>
    <Button variant="outlined" onClick={handleOpen} className="button">Recipe</Button>
    </Card.Body>
</Card>

第二个卡片代码

// Second Card 
<Card style={{ width: '18rem' }} className="Fajita">
    <Card.Img variant="top" src={fajita} className="Fav_image" />
    <Card.Body>
        <Card.Title className="Fav_title">Chicken Fajitas</Card.Title>
        <Card.Text className="Fav_text">
            Great for when you only have a few minutes to cook dinner.
        </Card.Text>
    <Button variant="outlined" onClick={handleOpen} className="button">Recipe</Button>
    </Card.Body>
</Card>

问题截图 #

我已尝试过Stack Overflow上的多种解决方案，但均未奏效。

问题原因与修复方案 #

核心问题是两个按钮共用了同一个handleOpen方法，且没有状态区分要展示的食谱。以下是两种实用的修复方式：

方式一：用单一状态标记要展示的食谱

1. 定义状态：
   在组件中新增状态变量，存储当前要展示的食谱标识：

   import { useState } from 'react';
   
   function YourComponent() {
       const [activeRecipe, setActiveRecipe] = useState(null);
       // 其他代码...
   }
   

2. 修改按钮点击事件：
   给每个按钮传递对应的食谱标识，更新状态：

   // 第一个卡片的按钮
   <Button variant="outlined" onClick={() => setActiveRecipe('chicken')} className="button">Recipe</Button>
   
   // 第二个卡片的按钮
   <Button variant="outlined" onClick={() => setActiveRecipe('fajita')} className="button">Recipe</Button>
   

3. 控制食谱显示：
   根据activeRecipe的值渲染对应内容：

   {activeRecipe === 'chicken' && (
       <div className="recipe-content">
           <h3>Chicken Paprakash 食谱</h3>
           {/* 这里放具体的食谱步骤、食材等内容 */}
       </div>
   )}
   
   {activeRecipe === 'fajita' && (
       <div className="recipe-content">
           <h3>Chicken Fajitas 食谱</h3>
           {/* 这里放具体的食谱步骤、食材等内容 */}
       </div>
   )}
   

方式二：用独立状态控制每个食谱的显示（适合模态框场景）

如果是用模态框展示食谱，给每个食谱单独设置状态更直观：

1. 定义独立状态：

   const [showChickenModal, setShowChickenModal] = useState(false);
   const [showFajitaModal, setShowFajitaModal] = useState(false);
   

2. 绑定按钮事件：

   // 第一个卡片按钮
   <Button variant="outlined" onClick={() => setShowChickenModal(true)} className="button">Recipe</Button>
   
   // 第二个卡片按钮
   <Button variant="outlined" onClick={() => setShowFajitaModal(true)} className="button">Recipe</Button>
   

3. 渲染对应模态框：

   <Modal show={showChickenModal} onHide={() => setShowChickenModal(false)}>
       <Modal.Header closeButton>
           <Modal.Title>Chicken Paprakash</Modal.Title>
       </Modal.Header>
       <Modal.Body>
           {/* 鸡肉Paprakash食谱内容 */}
       </Modal.Body>
       <Modal.Footer>
           <Button variant="secondary" onClick={() => setShowChickenModal(false)}>
               Close
           </Button>
       </Modal.Footer>
   </Modal>
   
   <Modal show={showFajitaModal} onHide={() => setShowFajitaModal(false)}>
       <Modal.Header closeButton>
           <Modal.Title>Chicken Fajitas</Modal.Title>
       </Modal.Header>
       <Modal.Body>
           {/* 鸡肉Fajitas食谱内容 */}
       </Modal.Body>
       <Modal.Footer>
           <Button variant="secondary" onClick={() => setShowFajitaModal(false)}>
               Close
           </Button>
       </Modal.Footer>
   </Modal>
   

以上两种方式都能解决点击任意按钮同时显示两个食谱的问题，你可以根据实际的展示场景选择适合的方案。

内容的提问来源于stack exchange，提问作者Haley