Uncaught TypeError: this.openA не является функцией в HTMLButtonElement.onclick - PullRequest
Новая
       8

Uncaught TypeError: this.openA не является функцией в HTMLButtonElement.onclick

0 голосов
/ 26 февраля 2019

Я пытаюсь добавить кнопку в определение столбца, используя сетку ag, но я получаю эту ошибку всегда.Я пытался использовать разные способы реализации кнопки, но так и не нашел решения.Получите ошибку на Edit_1, и он создает новый http-запрос.В Edit_2 нет ответа.Есть ли другой способ добавить кнопку в сетку ag. 

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 Ответ

0 голосов
/ 26 февраля 2019

openA выполняется до получения события, а возвращаемое значение функции не определено.Также openA ожидает объект события, но вы передаете значение params.

, если вы хотите, чтобы ваш обработчик событий работал, вам нужно сделать что-то вроде следующего, то есть openA должен вернуть функцию, чтобы иметь возможность получить объект события: 

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