Добавить кнопку в каждую строку в таблице response-bootstrap далее

Я хотел бы добавить кнопку в каждую строку 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, щелчок не работает.

Пожалуйста, дайте мне знать, как решить эту проблему?


reactjs react-bootstrap-table
person Arkar    schedule 04.09.2019    source источник
comment
Вам нужно сделать loop, чтобы вставить кнопку в each row.   -  person mindmaster    schedule 04.09.2019
comment
@mindmaster, я думаю, ты неправильно понял мой вопрос, в каждой строке есть кнопка, но функция {onclick} не работает.   -  person Arkar    schedule 04.09.2019
comment
Можете ли вы показать весь компонент?   -  person Domino987    schedule 04.09.2019
comment
ну ладно, тогда выложи весь код.   -  person mindmaster    schedule 04.09.2019
comment
@ Domino987 Пожалуйста, проверьте мое обновление.   -  person Arkar    schedule 04.09.2019
comment
@mindmaster Пожалуйста, проверьте обновление.   -  person Arkar    schedule 04.09.2019
comment
@Arkar, вам нужно использовать функцию жирной стрелки в вашем GetActionFormat. Если пример работает, откройте консоль (F12) и нажмите «Изменить», вы увидите, что он работает —> codesandbox.io/s/react-bootstrap-table-next-basic-example-md3m1   -  person mindmaster    schedule 04.09.2019

Ответы (1)


arrow_upward
3
arrow_downward

Вероятно, проблема в том, что вы неправильно передаете это.

Вы должны связать функцию 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>
     );
 }
person Domino987    schedule 04.09.2019