javascript - 在 React Material UI 表中使用按钮

Question

我使用 Material UI 制作了一个表格，其中每一行的第一列都有两个按钮。我希望通过单击这些行来编辑/删除行，但我坚持逻辑。我的实现甚至有可能吗？如果不是，那么首选的方式是什么？

render() {
  var deleteIcon =
  (<IconButton onClick={console.log("delete")}>
    <DeleteIcon color="secondary" />
  </IconButton>
  );

  const editIcon = (
    <IconButton onClick={console.log("edited")}>
      <EditIcon color="primary" />
    </IconButton>
  );

return(
  <TableBody>
   {this.state.serviceData.map(n => {
    return (
     <TableRow key={n.id}>
      <TableCell style={styles.editor} component="th" scope="row">
        {deleteIcon}
        {editIcon}
      </TableCell>
     <TableCell>{n.domain}</TableCell>
   <TableCell>{n.service_name}</TableCell>
  </TableCell>
 </TableRow>
)};

我的结果是:

Answer 1

基于@st4rl00rd 的评论，我能够使用以下方法绑定(bind)按钮:

const editIcon = (
      <IconButton onClick={this.editItem}>
        <EditIcon color="primary" />
      </IconButton>
    );

并在构造函数中绑定(bind)它们。我能够通过以下方式获取选定的行数据:

       <TableBody>
            {this.state.serviceData.map(n => {
              return (
                <TableRow key={n.id} onClick={this.getData.bind(this,n)}>