React - 如何将 onclick 功能添加到数据表中每一行的按钮答案

【问题标题】：React - How to add onclick function to buttons in each row in DatatablesReact - 如何将 onclick 功能添加到数据表中每一行的按钮
【发布时间】：2020-11-11 08:16:06
【问题描述】：

我正在尝试向我的数据表中的每一行添加：编辑和删除按钮，但是单击按钮不会执行“onclick”中声明的函数

$(schedTableID).DataTable({
      data: schedData.data,
      order: [[0, "asc"]],
      columns: [
        { data: "id",render: function(data, type, row) { return data; }, },
        { data: "timein", render: function(data, type, row) {  return data; }, },
        { data: "timeout", render: function(data, type, row) {  return data; }, },
        { data: "slot", render: function(data, type, row) { return data; }, },
        { data: "session", render: function(data, type, row) { return data; }, },
        { data: "schedule", render: function(data, type, row) { return data; }, },
        { data: "statuss", render: function(data, type, row) { return data; }, },
        { data: "id", render: 
          function(data, type, row) { 
            return(
              `
                <button  class="m-0 p-2 px-2 btn btn-success feather icon-check" data-toggle="button" id="${data}" onClick="${deleteHandler}"></button>
                <button  class="m-0 p-2 px-2 btn btn-danger feather icon-x" data-toggle="button" id="${data}" onclick="${deleteHandler}"></button>
              `
            )
          }, 
        },
        
      ],
      pageLength: 5,
      lengthMenu: [
        [5, 10, 25, 50, 100, -1],
        [5, 10, 25, 50, 100, "Show All"],
      ],
    });

这里是 onclick 函数

const deleteHandler = (e) => {
  console.log(123123)
}
const checkHandler = (e) => {
  console.log(123123)
}

【问题讨论】：

我建议查看这个库来处理数据表中的添加/删除/编辑：github.com/KasperOlesen/DataTable-AltEditor

标签： javascript reactjs datatable react-data-table-component

【解决方案1】：

我用 jquery 代替

$(document).ready(function () {

    $('#data-table-admin').unbind('click').on('click', '.btn-edit', function () {
      let table = $('#data-table-admin').DataTable();
      //retrieve table id, etc. (table.row($(this).parents('tr')).data().id)

      //function here 
    });


   $('#data-table-admin').on('click', '.btn-delete', function () {
      let table = $('#data-table-admin').DataTable();
      //retrieve table id, etc. (table.row($(this).parents('tr')).data().id)

      //functionality here

   });

});

【讨论】：