Question

I'm pushing JsonArray data to datatable in reactjs through array as following.

tableTest= () => { //Function Name
    axios({
        method: 'post',
        url: "/test" //URL

    })
        .then(response => {
            var testArray= [];
            var slNo = 0;
            response.data.map((item, index) => {
                var result = [];
                slNo++;
                var result = [];
                result.push(slNo);
                result.push(item.id);
                result.push(item.name);
                result.push(item.mob);
                result.push("<button onclick={this.accept}>Accept</button>");
                testArray.push(result);
            })
            this.setState({ testTableTable: testArray});
        }).catch(response => {
            console.log("Error", response);
        })
}

If I click the button Accept I get "this.accept" is not a function.

Can anyone please tell me how to write onclick function in Javascript.

Thank you :)

Answer 1

.then(response => {
            var testArray= [];
            window.YOUR_CLICK_FN = this.accept.bind(this);
            var slNo = 0;
            response.data.map((item, index) => {
                var result = [];
                slNo++;
                var result = [];
                result.push(slNo);
                result.push(item.id);
                result.push(item.name);
                result.push(item.mob);
                result.push("<button onclick={YOUR_CLICK_FN}>Accept</button>");
                testArray.push(result);
            })
            this.setState({ testTableTable: testArray});
        }).catch(response => {
            console.log("Error", response);
        })

问题在参考绑定中。

Answer 2

反应事件处理程序使用camelCase命名。您应该呼叫onClick而不是onclick。

请参见下面的链接： https://reactjs.org/docs/handling-events.html

CodeSandbox示例： https://codesandbox.io/s/3rp301jjym

Answer 3

tableTest= () => { //Function Name
    axios({
        method: 'post',
        url: "/test" //URL

    })
        .then(response => {
            var testArray= [];
            var slNo = 0;
            response.data.map((item, index) => {
                var result = [];
                slNo++;
                var result = [];
                result.push(slNo);
                result.push(item.id);
                result.push(item.name);
                result.push(item.mob);
                result.push((<button onclick={this.accept}>Accept</button>));
                testArray.push(result);
            })
            this.setState({ testTableTable: testArray});
        }).catch(response => {
            console.log("Error", response);
        })
}

问题是它存储为字符串。因此，您必须将其作为反应组件进行推送才能使其正常工作。

onclick在反应中不起作用。您必须使用onClick

Answer 4

代替onclick函数，使用datatable的onClick函数列的源代码如下所示：

 tableTest= () => { 
        axios({
            method: 'post',
            url: "/test" //URL

        })
            .then(response => {
                var testArray= [];
                var slNo = 0;
                response.data.map((item, index) => {
                    var result = [];
                    slNo++;
                    var result = [];
                    result.push(slNo);
                    result.push(item.id);
                    result.push(item.name);
                    result.push(item.mob);
                    result.push("<button class='accept"+index+"'>Accept</button>");//define class here to use reference for column onClick function
                    testArray.push(result);
                })
                this.setState({ testTableTable: testArray});
            }).catch(response => {
                console.log("Error", response);
            })
    }

//将表更改为数据表

setDataTableData = () => { //set datatable

    this.$el2 = $(this.el2) //el2 is reference of table
    this.$el2.DataTable(
      {
        data: this.state.RowTableData, //RowTableData is array
       "columnDefs": [

          //column click function goes here
          {
            "targets": 4,// 4th column in a table
            "createdCell": (td, cellData, rowData, row, col) => {

              $(td).on('click', '.accept' + row, () => { //Click on <td>
                this.accept(); //call function here
              })

            }
          }
        ],

      }
    )
}

//在此处接受功能

accept =() =>{
//function here
}

ReactJs Onclick Not Working If Append To Table in Javascript

4 个答案: