接下来在反应引导表中的每一行添加按钮

Question

我想在 react-bootstrap-table 2 的每一行添加一个按钮，并且还想绑定按钮单击。但现在它不起作用。

这是我的代码，

InOutHeader() {
return (
<Table className="border-0 m-0 p-0">
<colgroup>
<col width="50" />
<col />
</colgroup>
<thead>
<tr>
<th className="border-0 border-left p-1 text-center" colSpan="2">
In
</th>
</tr>
<tr>
<th className="border-bottom-0 border-left-0 p-1">Time</th>
<th className="border-bottom-0 p-1">Date</th>
</tr>
</thead>
</Table>
);
}
InOutDate(cell, row) {
return (
<Table className="border-0 m-0 p-0">
<thead>
<tr>
<td width="50" className="border-bottom-0 border-left-0 border-top-0 p-1">
{moment(row.ct1).format("hh:mm")}
</td>
<td className="border-bottom-0 border-right-0 border-top-0 p-1">{moment(row.ct1_dd).format("DD-MM-YYYY")}</td>
</tr>
</thead>
</Table>
);
}
GetDateFormat(cell, row) {
return (
moment(row.tdate).format("DD-MM-YYYY ") +
moment(row.tdate)
.format("dddd")
.substring(0, 3)
);
}
GetBooleanFormat(cell, row) {
return row.isapproved ? "True" : "False";
}
GetActionFormat(cell, row) {
return (
<div>
<button type="button" className="btn btn-outline-primary btn-sm ts-buttom" size="sm" onClick={this.handleModelEdit}>
Edit
</button>
<button type="button" className="btn btn-outline-danger btn-sm ml-2 ts-buttom" size="sm">
Delete
</button>
</div>
);
}
getcolumnlist() {
const columns = [
{
dataField: "tdate",
text: "Date",
classes: "p-1",
formatter: this.GetDateFormat,
headerStyle: {
width: "120px"
},
sort: true
},
{
dataField: "empid",
text: "Employee ID",
classes: "p-1",
sort: true
},
{
dataField: "cscid",
text: "Cost Center",
classes: "p-1",
sort: true
},
{
dataField: "shiftid",
text: "Shift ID",
classes: "p-1",
sort: true
},
{
text: "In",
dataField: "ct1",
headerFormatter: this.InOutHeader,
headerStyle: {
padding: "0px",
width: "140px"
},
formatter: this.InOutDate,
classes: "p-0"
},
{
dataField: "isapproved",
text: "Approve",
formatter: this.GetBooleanFormat,
classes: "p-1",
sort: true
},
{
text: "Action",
dataField: "",
formatter: this.GetActionFormat,
classes: "p-1"
}
];
return columns;
}
handleModelEdit() {
console.log("hello");
}
<BootstrapTable keyField={"id"} 
data={this.state.timesheetstemp} 
columns={this.getcolumnlist()}
>
</BootstrapTable>

当我单击该按钮时，它不会handlemodeledit功能。

每行显示按钮，但是当按钮上没有onclick功能时，单击不起作用。

请让我知道如何解决这个问题？

Answer 1

问题可能是您没有正确传递此内容。

您必须像这样在构造函数中绑定函数GetActionFormat：

constructor(props) {
super(props);
this.GetActionFormat= this.GetActionFormat.bind(this);
}

或者，您可以将函数转换为胖箭头函数。它将完全像以前一样工作，但正确地将this传递到函数中：

GetActionFormat = (cell, row) => {
return (
<div>
<button type="button" className="btn btn-outline-primary btn-sm ts-buttom" size="sm" onClick={this.handleModelEdit}>
Edit
</button>
<button type="button" className="btn btn-outline-danger btn-sm ml-2 ts-buttom" size="sm">
Delete
</button>
</div>
);
}