如何在React应用中通过OnClick方法实现Reactstrap卡片点击后复制至页尾展示详情

实现思路 #

• 在MenuComponent组件内新增状态，专门存储被用户点击过的菜品对象
• 给原有基础卡片绑定点击事件，点击时将对应菜品存入上述状态
• 原有菜品列表渲染完成后，遍历状态数组渲染带完整字段的详情卡片，自然排布在页面最末尾

改造后的完整组件代码 #

import React, { useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {
  Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle, Badge
} from "reactstrap";

function MenuComponent(props) {
  // 存储所有被点击后追加到末尾的菜品
  const [appendedDishes, setAppendedDishes] = useState([]);

  // 卡片点击处理：将当前点击的菜品追加到状态数组
  const handleDishSelect = (targetDish) => {
    setAppendedDishes(prevList => [...prevList, targetDish]);
  };

  return (
    <div className="container">
      <div className="row">
        {/* 原有基础菜品卡片列表 */}
        {props.dishes.map((dish) => {
          return (
            <div className="col-12 col-md-5 m-1" key={dish.id}>
              <Card 
                onClick={() => handleDishSelect(dish)}
                style={{cursor: "pointer"}} // 给用户可点击的视觉提示
              >
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardImgOverlay>
                  <CardTitle>{dish.name}</CardTitle>
                </CardImgOverlay>
              </Card>
            </div>
          );
        })}

        {/* 页面最末尾渲染的带详情的追加卡片 */}
        {appendedDishes.map((dish, index) => {
          return (
            // 追加场景下同个菜品可能重复出现，key需要结合索引保证唯一性
            <div className="col-12 col-md-5 m-1" key={`appended-${dish.id}-${index}`}>
              <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                  <CardTitle>
                    {dish.name}
                    {dish.label && <Badge color="danger" className="ms-2">{dish.label}</Badge>}
                    <span className="float-end">${dish.price}</span>
                  </CardTitle>
                  <CardText className="mt-3">{dish.description}</CardText>
                </CardBody>
              </Card>
            </div>
          )
        })}
      </div>
    </div>
  );
}

export default MenuComponent;

功能效果说明 #

• 点击任意原有基础卡片，会在页面列表的最末尾生成一张和被点击卡片同源的详情卡片
• 详情卡片会展示所有关联的菜品字段：标签、价格、详细描述，满足需求中“展示卡片关联额外信息”的要求
• 支持连续点击不同卡片，每次点击都会把对应卡片追加到最末尾，不会覆盖之前已经追加的内容
• 如果需要调整为“点击后仅展示最新选中的菜品详情，不保留历史追加内容”，只需要把点击处理函数里的状态更新逻辑改为单值存储即可

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