未捕获的TypeError：this.openA不是HTMLButtonElement.onclick上的函数

问题描述

我正在尝试使用ag网格在列定义上添加按钮，但最终总是遇到此错误。我尝试使用不同的方法来实现按钮，但从未找到解决方案。
收到有关Edit_1&的错误它创建一个新的http请求。
在Edit_2中没有响应。
还有其他方法可以在农业网格中添加按钮。

I'm trying to add button on column definition using ag grid, but I end up getting this error always. I tried using different ways to implement button but never found a solution.Get error on Edit_1 & it creates a new http request.In Edit_2 there's no response.Is there any other way to add button in ag grid.

import React from 'react';
import ReactDataGrid from 'react-data-grid';
import {
  AgGridReact
} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-material.css';
import {
  Button
} from "reactstrap";


const defaultColumnProperties = {
  sortable: true,
};

const columnDefs = [{
      {
        headerName: "Id",
        field: "id",
        width: 80
      },
      {
        headerName: "Name",
        field: "name",
        width: 500
      },
      {
        headerName: "Edit_1",
        field: "id",
        sortable: false,
        filter: false,
        colId: "edit_1",
        cellRenderer: function(params) {
          return "<Button onclick={this.openA(" + params.value + ")}> Edit 1 </Button>"
        },
        {
          headerName: "Edit_2",
          field: "id",
          sortable: false,
          filter: false,
          colId: "edit_2",
          cellRenderer: function(params) {
            return "<Button onclick={this._handleClick}> Edit 2 </Button>"

          }
        ];

        class Test extends React.Component {

          constructor(props) {
            super(props)
            this.openA = this.openA.bind(this);
            this._handleClick = this._handleClick.bind(this);

          }

          state = {
            rowData: [],
            error: null,
          }

          _handleClick() {
            console.log("some API call and state change");
          }


          onGridReady = params => {
            this.gridApi = params.api;
            this.gridColumnApi = params.columnApi;

            const httpRequest = new XMLHttpRequest();
            const updateData = data => {
              params.api.setRowData(data.slice(0, 10));
            };

            Network.get('**API CALL**').then(response => {
              updateData(response.data.org_list);
            }).catch(response => {
              console.log("Error", response.response);
            });
          }

          openA = id => event => {
            console.log(id);
          }


          render() {

            return ( <
              div >

              <
              div id = "myGrid"
              style = {
                {
                  height: "100%",
                  width: "100%"
                }
              }
              className = "ag-theme-material" >
              <
              AgGridReact enableSorting = {
                true
              }
              groupSelectsChildren = {
                true
              }
              rowData = {
                this.state.rowData
              }
              columnDefs = {
                columnDefs
              }

              onGridReady = {
                this.onGridReady
              }
              />

              <
              /div>
            );
          }
        }

        export default Test;

推荐答案

openA在接收到事件之前正在执行，并且该函数的返回值未定义。同样，openA需要一个事件对象，但是您正在传递params值。

openA is being executed before it receives the event and the return value of the function is undefined. Also openA expects an event object, but you are passing params value.

如果您想让事件处理程序正常工作，则需要执行以下操作，即openA必须返回一个可以接收事件对象的函数：

if you want your event handler to work you need to do somthing like the following i.e. openA must return a function to be able to receive the event object:

//
openA = (value) => {
  return function(event) {
    console.log(id);
  };
};

这篇关于未捕获的TypeError：this.openA不是HTMLButtonElement.onclick上的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！