Как поставить onClick в столбце таблиц данных?

Question

Итак, пытаясь использовать datatable в реагирующих, я хочу поставить щелчок в столбце, но получаю ошибку.

Ниже мой код:

const $ = require('jquery')
$.DataTable = require('datatables.net')
class Rmsdatatable extends Component {
    constructor(props) {
        super(props)
        this.handletableclick = this.handletableclick.bind(this)
    }
    handletableclick(event) {
        console.log(event)
    }
    componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            return '<a onClick={' + this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { data: "state" }
                ]
            }
        )
    }
    render() {
        return (
            <div style={{ 'padding': '10px' }} className="col-xs-10">
                <table id="example" className="display" width="100%" ref={el => this.el = el}>
                    <thead>
                        <tr>
                            <th>VFD/Controller No</th>
                            <th>Beneficiary</th>
                            <th>District</th>
                            <th>State</th>
                        </tr>
                    </thead></table>
            </div>

        )
    }
}

Для справки, я использую эту ссылку:

https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

Ошибка: TypeError: Cannot read property 'handletableclick' of undefined

Спасибо и ценим вашу помощь.

Answer 1

Можете ли вы попробовать так:

 columnDefs: [
            {
                targets: 1,
                createdCell: (td, cellData, rowData, row, col) =>
                  ReactDOM.render(
                    <button
                      onClick={() => this.handletableclick(row) }>
                     data
                    </button>, td),
              } 
        ]

Answer 2

попробуйте

       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
            {
       $(ntd).html("<a onClick={ this.handletableclick.bind(this, iRow)}>{ 
              sData }</a>
              }

вместо

render: function (data, type, row) {
     return '<a onClick={' + 
   this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                    }

Answer 3

Это похоже на проблему сферой.Попробуйте следующее:

componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        const self = this; // ******** save a reference to 'this' 
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            // ******** use self here (instead of this) ********
                            return '<a onClick={' + self.handletableclick.bind(self, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { data: "state" }
                ]
            }
        )
    }

Answer 4

return (<a onClick={ this.handletableclick.bind(this, row) }>{ data }</a>)

Заменить текущий оператор возврата на приведенный выше.Вам не нужно возвращать строку вашего HTML-тега.