Я пытаюсь добавить кнопку в определение столбца с помощью сетки 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;


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


openA выполняется до того, как получит событие, и возвращаемое значение функции не определено. Также openA ожидает объект события, но вы передаете значение params.
если вы хотите, чтобы ваш обработчик событий работал, вам нужно сделать что-то вроде следующего, то есть openA должен возвращать функцию, чтобы иметь возможность получать объект события:
//
openA = (value) => {
return function(event) {
console.info(id);
};
};
Это сработало для меня
cellRendererFramework: (props) => { return ( <button onClick{this.handleClick.bind(this)>Click</button> } ); }