on button Click 我需要在 actionButtonClick() 方法中获取被点击行的 id

Question

当我点击任何行的按钮时，我需要在 actionButtonClick() 方法中获取该行的 id 以进行详细/编辑/删除操作。我可以获得可以定义按钮类型的按钮颜色（person/edit/close）。但我也需要行号。我在此处添加了 table 图片以便清晰查看。

export default function AdminManagement() {
    const actionButtonClick = (event) => {
      const clickedBtnColor = event.currentTarget.value;
      //Here get the id of the row for details/remove/delete operation
    }    
    //Here is the Table Buttons
    const roundButtons = [
      { color: "info", icon: Person },
      { color: "success", icon: Edit },
      { color: "danger", icon: Close }
    ].map((prop, key) => {
      return (
        <Button
          id='btnId'
          round
          color={prop.color}
          className={classes.actionButton + " " + classes.actionButtonRound}
          key={key}
          value={prop.color}
          onClick={actionButtonClick}
        >
          <prop.icon className={classes.icon} />
        </Button>
      );
    });   
    //Here is the Table Data
    const userData = [
      {
        id: 1,  //onClick: need this id inside actionButtonClick() method for details / remove /delete operation 
        fName: 'Musadul',
        accountNo: '2021***********',
        phone: '01***********',
        email: 'musadul*****@gmail.com',
      },
      {
        id: 2,
        fName: 'Krz',
        accountNo: '2021********',
        phone: '01*******',
        email: 'krz*******@gmail.com',
      },
    ]    
    return (
      <>
        <Table
          tableHead={[
            "#",
            "Name",
            "Account No.",
            "Phone",
            "Email",
            "Actions"
          ]}
          tableData={userData.map((user) => {
            const { id, fName, accountNo, phone, email } = user;
            return (
              [id, fName, accountNo, phone, email, roundButtons]
            )
          })}
          customCellClasses={[classes.center, classes.right, classes.right]}
          customClassesForCells={[0, 4, 5]}
          customHeadCellClasses={[
            classes.center,
            classes.right,
            classes.right
          ]}
          customHeadClassesForCells={[0, 4, 5]}   
        />
      </>
    );
  }

[Table 图片在这里][1]

      [1]: https://i.stack.imgur.com/izorK.png

Answer 1

    <Table
                

tableHead={[
                  "#",
                  "Name",
                  "Phone",
                  "Email",
                  "Actions"
                ]}
                tableData={userData.map((user) => {
                  //console.log('user: ', user)
                  const { adminId, adminName, adminMobile, adminEmail } = user;
                  return (
                    [
                      adminId,
                      adminName,
                      adminMobile,
                      adminEmail,
                      <div>
                        <Button style={{ marginLeft: '2px', marginRight: '2px' }}
                          round
                          color='info'
                          className={classes.actionButton + " " + classes.actionButtonRound}
                          onClick={() => viewAdminDetails(user.adminId)}>
                          <Person className={classes.icon} />
                      </div>
                      
                    ]
                  )
                })}
                customCellClasses={[classes.center, classes.right, classes.right]}
                customClassesForCells={[0, 4, 5]}
                customHeadCellClasses={[
                  classes.center,
                  classes.right,
                  classes.right
                ]}
                customHeadClassesForCells={[0, 4, 5]}
    
                  />

on button Click 我需要在 actionButtonClick() 方法中获取被点击行的 id

on button Click I need to get the id of the clicked row inside actionButtonClick() method

reactjs

react-table