Question

我在jQuery中看到了几个工作示例，但在React的上下文中却没有。因此希望提出此特定查询。

我有一个反应组件类，它呈现一个数据表（如datatables.net中所示）。我使用datatable-Options的column：defaultContent为数据表中的每一行添加了一个查看按钮。

我写了一个方法类，应该在按下视图按钮时执行。

columnDefault选项中的嵌入式HTML是

                columns: [
                  { "defaultContent":`<button onClick=${this.onView}>View</button>`},
                  { data: "name" },
                  { data: "email" },
                  { data: "mobile", "defaultContent": "<i>Not set</i>" },
                  { data: "landline", "defaultContent": "<i>Not set</i>"}
                ]

我可以看到按钮已渲染。

挑战在于使onView方法与特定的recordId一起执行。

Answer 1

如果要将数据传递给绑定到按钮onclick的回调函数，则可以使用下面提到的代码

<button onClick=${() => this.onView(recordId)}>View</button>

Answer 2

我的解决方案

   "columns": [
                   {
                       "data": "Column 1",
                   },
                   {
                       "data": "Column 2",
                   },
                   {
                       "data": "Column 3",
                   },
                   {
                       "data": null,
                       "searchable": false,
                       "orderable": false,
                       "render": function (data, type, full, meta) {
                           return ''
                       }
                   },
               ], 
 "columnDefs": [
                   {
                       targets: 3,
                       createdCell: (td, cellData, rowData, row, col) =>
                         ReactDOM.render(
                           <button className="btn btn-warning" style={{borderRadius: '30px'}}
                             onClick={changeName}>
                            data
                           </button>, td),
                     } 
               ]

    const changeName = async (e) => {
        alert('ok')
    }

如何在ReactJS中的数据表内的按钮上设置onClick事件

2 个答案: