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

Я пытаюсь добавить кнопку в определение столбца с помощью сетки ag, но в итоге всегда получаю эту ошибку. Я пытался использовать разные способы реализации кнопки, но так и не нашел решения. Получите ошибку на Edit_1 и создайте новый HTTP-запрос. В Edit_2 нет ответа. Есть ли другой способ добавить кнопку в 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.info("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.info("Error", response.response);
            });
          }

          openA = id => event => {
            console.info(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;

Это сработало для меня cellRendererFramework: (props) => { return ( <button onClick{this.handleClick.bind(this)>Click</button> } ); }

Santhosh A 05.03.2019 15:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
694
1

Ответы 1

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

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

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

Другие вопросы по теме