React实现点击按钮仅显示选中行完整ID的问题求助

你当前的代码使用了单一的isClicked状态变量，所有表格行共享这个状态。当点击任意一行的按钮时，会切换全局的isClicked值，导致所有行同时展开或收起完整ID。

需要为每一行维护独立的展开状态，推荐使用对象或数组来记录各自行的展开状态，而非单一布尔值。

步骤1：修改状态初始化 #

将原来的单一布尔状态替换为记录行索引的对象状态：

const [expandedIds, setExpandedIds] = useState({});

步骤2：更新点击事件处理函数 #

修改handleFullUserID，针对当前点击的行索引单独切换其展开状态：

const handleFullUserID = (rowIndex) => {
  setExpandedIds(prev => ({
    ...prev,
    [rowIndex]: !prev[rowIndex] // 仅切换当前行的展开状态
  }));
};

步骤3：调整ID显示逻辑 #

根据当前行的索引是否处于展开状态，直接决定显示完整ID还是截断后的ID：

const displayId = expandedIds[index] ? UserID : UserID.slice(0, 14);

步骤4：修正按钮的点击事件绑定 #

原代码中onClick={(index) => handleFullUserID(index)}会把事件对象误传为index，需改为直接传递当前行的索引：

<button onClick={() => handleFullUserID(index)}>...</button>

import { useState } from 'react';

// 表格行组件示例（假设在数组循环中渲染）
const UserRow = ({ UserID, index }) => {
  const [expandedIds, setExpandedIds] = useState({});

  const handleFullUserID = (rowIndex) => {
    setExpandedIds(prev => ({
      ...prev,
      [rowIndex]: !prev[rowIndex]
    }));
  };

  const displayId = expandedIds[index] ? UserID : UserID.slice(0, 14);

  return (
    <tr key={index}>
      <td>
        {displayId}
        <button onClick={() => handleFullUserID(index)}>...</button>
      </td>
    </tr>
  );
};

如果表格行是基于数据数组循环渲染（比如users.map((user, index) => <UserRow ... />)），建议用数据自身的唯一ID（如user.id）代替index作为状态的键和组件的key，避免数据更新时索引混乱导致状态异常。

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