Question

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

这是我的代码，

InOutHeader（）{ 返回（在时间日期）; }

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>
     );
 }

希望这会有所帮助。编码愉快。

将按钮添加到下一个react-bootstrap-table

1 个答案: