React中点击表格行按钮获取当前行对应用户对象的实现方法

你当前的代码存在两个核心问题：

1. onClick属性绑定的是立即执行的表达式，而非点击触发的回调函数——组件渲染列表每一行时，都会直接执行console.log(user.firstName)，所以页面一加载就会打印所有用户的名字，不需要点击按钮就能触发输出。
2. 现有事件写法无法把当前行的用户对象正确传入处理函数。

另外你的表格结构不符合HTML规范：一个表格只需要一个<tbody>标签包裹所有行，你现在在循环里给每一行都套了独立的<tbody>，虽然不影响基础功能但不符合标准，建议调整。

1. 修正事件绑定逻辑 #

把onClick的属性值改成箭头函数包裹的回调，只有用户点击按钮时才会执行内部逻辑，同时把当前循环拿到的完整user对象传给处理函数：

<button 
  id="updateUser" 
  className="button-update-admin" 
  onClick={() => {
    handleClick(user)
  }}
>
  {/* 原有按钮内容如果是图标可直接保留，此处文字仅做示例 */}
  更新用户
</button>

2. 编写对应的点击处理函数 #

在组件内定义handleClick，通过参数接收传入的选中行用户数据，后续的上下文赋值、编辑弹窗唤起等逻辑都可以在这里实现：

const handleClick = (currentUser) => {
  // currentUser就是当前点击行对应的完整用户数据
  console.log('选中的用户数据：', currentUser)
  // 后续逻辑示例：
  // setEditTarget(currentUser)
  // setEditModalVisible(true)
}

3. 优化表格结构（推荐调整） #

把<tbody>移到循环外层，同时优先用用户唯一标识_id作为列表key（比用数组index更符合React渲染最佳实践），调整后的完整表格代码：

{/* ANCHOR - TABLE ROWS */}
<tbody>
  {admins.map((user) => (
    <tr key={user._id}>
      <td style={{fontWeight: 'bold'}}>{user._id}</td>
      <td>{shortenStr(user.username)}</td>
      <td>{shortenStr(user.firstName)}</td>
      <td>{shortenStr(user.lastName)}</td>
      <td>{shortenStr(user.dob)}</td>
      <td>
        <div className="button-div">
          <button 
            id="updateUser" 
            className="button-update-admin" 
            onClick={() => handleClick(user)}
          >
            更新用户
          </button>
        </div>
      </td>
    </tr>
  ))}
</tbody>

• 页面初次渲染不会提前执行打印逻辑，控制台不会无意义输出所有用户名
• 点击对应行的按钮时，只会把当前行的完整用户数据传入处理函数，完全满足后续做上下文创建、编辑功能的需求

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