如何在基于类的组件 dataGrid mui 组件的 renderCell 中添加 onclick 事件答案

【问题标题】：how to add onclick event in renderCell of dataGrid mui components which is class based component如何在基于类的组件 dataGrid mui 组件的 renderCell 中添加 onclick 事件
【发布时间】：2022-07-20 21:08:16
【问题描述】：

下面是我的 userlist.jsx 组件，它使用 mui 组件 datagrid 在表 iam 上显示用户数据，我使用 renderCell 在表中添加了删除按钮，但它不起作用。

    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'user', headerName: 'User', width: 170, renderCell: (params)=>{
        return(
            <div className='userlistuser'>
            <img className='userlistimage' src={params.row.avatar} alt="profile"/>
            {params.row.username}
            </div>
        )
    } },
    { field: 'email', headerName: 'Email', width: 190},
    {
      field: 'post',
      headerName: 'Post',
      width: 140,
    },
    {
        field:'Action',
        headerName:'Action',
        widht:150,
        renderCell:(params)=>{
            return(
                <>
                <Link to={"/user/"+ params.row.id}>
                <button className='userlistedit'>Edit</button>
                </Link>
>>after clicking this button i want to delete this particular user from the table.
<DeleteOutline className="userlistdelete" onClick={()=>this.handleDelete(params.row.id)}/>
                </>
            )
    
        }

    }

  ];

export default class UserList extends React.Component {
state={userdata:Userrows}

handleDelete = (id) =>{
    console.log(id);
}

 render(){
  return (
<div className='userlist'>
<DataGrid
        rows={this.state.userdata}
        columns={columns}
        pageSize={7}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  )
}
}

*我有一个删除按钮，应该删除表中的数据但是当我单击删除按钮时，控制台会引发错误 '无法读取未定义的属性（读取'handleDelete'） *

【问题讨论】：

标签： javascript reactjs react-state

【解决方案1】：

下面是渲染单元格以在 MUI 数据网格上提供 onClick 事件的代码：

  { field:"fundListMapped",headerName: "Funds Mapped" ,type: 'string', width:300 ,
  renderCell: (cellValues) => {
   
      return (
        <>
        <div>{displayList[0]},{displayList[1]},{displayList[2]}      
        <a href="#" onClick={(event) => {
  this.setActiveTab(event, cellValues);
}}>
        ...View Full List
         </a>
                       <Button
    variant="contained"
    color="primary"
    onClick={(event) => {
      this.handleCellClick(event, cellValues);
    }}
  >
    Print
  </Button>
        </div>
        </>
        );
    }
    
}

【讨论】：