接下来在react-bootstrap-table的每一行添加按钮

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

接下来在react-bootstrap-table的每一行添加按钮

Add button to each row in react-bootstrap-table next

reactjs

react-bootstrap-table