React实现点击按钮按fid/索引仅展示对应数组元素的info数据

核心思路 #

通过新增状态跟踪当前激活的条目ID，点击按钮时更新该状态，渲染时仅对匹配状态的条目展示info内容。

具体修改步骤 #

1. 添加激活状态
   在组件中新增状态，用来存储当前被点击条目的fid（用fid更精准，因为每条数据都有唯一标识）：

const [activeFid, setActiveFid] = useState(null);

2. 编写点击处理函数
   替换原有的clickedMe，改成带参数的函数，点击时切换当前激活的条目（支持再次点击关闭）：

const handleClick = (fid) => {
  // 点击已激活的条目就关闭，否则激活该条目
  setActiveFid(prev => prev === fid ? null : fid);
};

3. 修改按钮绑定与info渲染逻辑
   把按钮的点击事件改成传递当前条目fid，同时修改info的展示判断，只对激活的条目显示内容：

// 替换原按钮和info区域的代码
<div>
  <button onClick={() => handleClick(element.fid)} type="button">
    {element.fid} 查看详情
  </button>
  {/* 仅当当前条目fid与activeFid匹配时，展示info内容 */}
  {activeFid === element.fid && (
    <div>
      <div className="view view-cascade overlay">
        <img className="card-img-top" src={element.info.image} alt="Card image cap"/>
      </div>
      <h5 className="card-title">id:{element.info.id}</h5>
      <h5 className="card-title">goalid:{element.info.goalid}</h5>
      <h5 className="card-title">levelid:{element.info.levelid}</h5>
      <h5 className="card-title">workname:{element.info.workname}</h5>
      <h5 className="card-title">dow:{element.info.dow}</h5>
      <img src={element.info.image} alt="" width={'100%'}/>
    </div>
  )}
</div>

修改后完整组件示例 #

import { useState, useEffect } from 'react';

const WorkoutComponent = () => {
  const [data, setData] = useState();
  const [activeFid, setActiveFid] = useState(null);

  useEffect(() => {
    (async () => {
      // 这里替换成你实际的接口请求逻辑
      // const resp = await fetch('你的接口地址');
      // const result = await resp.json();
      // setData(result.workout);
      setData(resp.workout);
    })();
  }, []);

  const handleClick = (fid) => {
    setActiveFid(prev => prev === fid ? null : fid);
  };

  return (
    <div className="row">
      {data?.map((element, i) => {
        return (
          <div className="col-md-4" key={element.fid}>
            <div className="card card-cascade wider" style={{ display: "flex", justifyContent: "start" }}>
              <div className="card-body card-body-cascade text-center pb-0">
                <h5 className="card-title">fid:{element.fid}</h5>
                <h5 className="card-title">uid:{element.uid}</h5>
                <h5 className="card-title">wdid:{element.wdid}</h5>
                <h5 className="card-title">type:{element.type}</h5>
                <div>
                  <button onClick={() => handleClick(element.fid)} type="button">
                    {element.fid} 查看详情
                  </button>
                  {activeFid === element.fid && (
                    <div>
                      <div className="view view-cascade overlay">
                        <img className="card-img-top" src={element.info.image} alt="Card image cap"/>
                      </div>
                      <h5 className="card-title">id:{element.info.id}</h5>
                      <h5 className="card-title">goalid:{element.info.goalid}</h5>
                      <h5 className="card-title">levelid:{element.info.levelid}</h5>
                      <h5 className="card-title">workname:{element.info.workname}</h5>
                      <h5 className="card-title">dow:{element.info.dow}</h5>
                      <img src={element.info.image} alt="" width={'100%'}/>
                    </div>
                  )}
                </div>
                <div className="card-footer text-muted text-center mt-4">
                  2 days ago
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default WorkoutComponent;

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