从 React 中的 table 行获取对象

Question

我是一个从事简单 CRUD 工作的初学者，我想做的就是从选定的行中获取用户。如果你看下面：

      {/* ANCHOR - TABLE ROWS */}
      {admins.map((user, index) => (
          <tbody key={index}>

            <tr>
              <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 && console.log(user.firstName)}>
                  </button>
                </div>

              </td>
            </tr>

            </tbody>
      ))}

Console.log 给我 table 中每个用户的名字，例如：

John
Steve
Frank

理想情况下，我想将用户数据传递到我的手柄点击功能中，这样我就可以创建一个上下文。感谢任何帮助，谢谢！

Answer 1

请换-

onClick={handleClick && console.log(user.firstName)}>

到

onClick={() => {
  console.log(user.firstName)
}}

或者，如果您想要一个单独的 onClick 函数与 event 数据 -

function handleClick(event, user) {
    console.log(user.firstName);
}
...
onClick={(event) => handleClick(event, user)}