React中如何让onClick仅触发单个卡片的编辑表单而非全部？

你当前的核心问题是用单个布尔值showForm控制所有卡片的表单显示状态——所有卡片共享同一个状态变量，只要这个值变为true，所有卡片都会渲染编辑表单。

步骤1：修改状态存储方式 #

在Displaycards组件中，把原来的布尔状态改成存储当前编辑卡片的id，初始值设为null（表示没有卡片处于编辑状态）：

// 替换原来的const [showForm, setShowForm] = React.useState(false);
const [editingId, setEditingId] = React.useState(null);

步骤2：修改编辑按钮的点击逻辑 #

点击编辑按钮时，切换当前编辑的卡片id——如果当前已经是该卡片的编辑状态，就取消编辑（设为null），否则设置为当前卡片的id：

<button
  type="button"
  className="editbutton"
  onClick={() => setEditingId(prev => prev === id ? null : id)}
>
  Edit
</button>

步骤3：修改表单显示的判断条件 #

只有当当前卡片的id和editingId完全匹配时，才渲染对应的编辑表单：

// 替换原来的{showForm && (...)}
{editingId === id && (
  <div>
    <Editform
      cards={cards}
      setCards={setCards}
      id={id}
    />
  </div>
)}

步骤4：优化Editform组件逻辑 #

原组件中editThisCard的判断完全多余，而且用filter取第一个元素不如find直接，优化后代码更简洁：

function Editform({ cards, setCards, id }) {
  const thisCard = cards.find((card) => card.id === id);
  // 可选：处理卡片不存在的边界情况
  if (!thisCard) return null;

  return (
    <div className="form">
      <p>Name of game:</p>
      <input type="text" value={thisCard.gamename}></input>

      <p>Max players: </p>
      <input type="text" value={thisCard.maxplayers}></input>
      <p>Free spaces: </p>
      <input type="text" value={thisCard.freespaces}></input>

      <p>Table #: </p>
      <input type="text" value={thisCard.tablenum}></input>
      <p></p>
      <button type="button" className="playbutton">
        Save changes
      </button>
    </div>
  );
}

export default Editform;

原理说明 #

通过存储当前编辑卡片的id，每个卡片只在自身id与状态中的editingId匹配时才显示表单，彻底解决了所有卡片共享同一布尔状态导致的批量显示问题。

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