问题描述
我在React中有一个表示表的数据。最后两列分别是编辑按钮和删除按钮。
我想要的是当我按下Delete按钮时,我想要获取该行的索引,并根据该索引,我想要获取一些数据来执行Axios调用。获取索引我使用react引导表 rowEvents 如下。请查看以下代码段,并更正其应有的方式。
class ViewEmp extends React.Component{
constructor(props) {
super(props);
}
rowEvents = {
onClick: (e,row,rowIndex) => {
}
};
handleDelete = (e) =>{
console.log("delete")
}
delete = () =>{
return <Button color="danger" onClick={
this.handleDelet}> Delete </Button>;
}
columns = [{
datafield: 'emp_id',text: 'Employee ID'
},{
datafield: 'firstName',text: 'First Name'
},{
text: 'Delete',formatter: this.delete
}];
render() {
return (
<Container style={{paddingTop: '10px',/*background: '#102454'*/}}>
<Row style={{paddingTop: '10vh'}}>
<BootstrapTable
striped={true} hover={true}
keyField='emp_id'
data={ this.state.employeeList }
columns={ this.columns }
rowEvents={ this.rowEvents }
pagination={paginationFactory()}>
</BootstrapTable>
{component}
</Row>
</Container>
);
}
}
export default ViewEmp;
解决方法
我花了几个小时才找到解决方案。实际上,没有直接功能或其他任何东西。只需在格式化程序中编写。
const dealColumns = [
// Other data columns
{
formatter: (cellContent,row) => {
return (
<button
className="btn btn-danger btn-xs"
onClick={() => this.handleDelete("name of a data field and this will return
the value of that cell")}
>
Delete
</button>
);
},},];
handleDelete = (rowId) => {
console.log(rowId);
};
这里是参考。 https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/544
谢谢。
,感谢@dasun_001,快速实现代码共享。注意:删除 cellContent 将不起作用。我没有做更多的研究。希望有人觉得有帮助。
sapply(names(listofdf),function (x) write.table(listofdf[x],file = paste(names(listofdf)[x],".csv",sep=""),row.names = FALSE))