Uncaught TypeError: this.openA is not a function at HTMLButtonElement.onclick

问题

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;

回答1:

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.

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);
  };
};

来源：https://stackoverflow.com/questions/54885155/uncaught-typeerror-this-opena-is-not-a-function-at-htmlbuttonelement-onclick