Question

我试图使用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;

Answer 1

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

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

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

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

1 个答案: