时间戳

首页 > 解决方案 > 如何在 ag-grid 单元格渲染器 reactjs 中添加 onclick 事件并访问类函数

reactjs - 如何在 ag-grid 单元格渲染器 reactjs 中添加 onclick 事件并访问类函数

问题描述

我想在时间列定义时为 reactjs 中的 ag-grid 表列添加一个按钮。onclick 我需要调用一个类函数。我想创建 onclick 事件并将参数值传递给函数并从那里进行 api 调用。

columnDefs = [{
    ..... {
      headerName: "View",
      field: "id",
      sortable: false,
      filter: false,
      colId: "view",
      cellRendererFramework: function(params) {
        return <Button onclick = {
          this.handleClick
        } > Test < /Button>
      },

    },
    ......
  ];
}
handleClick() {
  console.log("some API call and state change");
}



render() {

    return ( <
      div >
      <
      div id = "myGrid"
      style = {
        {
          height: "100%",
          width: "100%"
        }
      }
      className = "ag-theme-material" >
      <
      AgGridReact enableSorting = {
        true
      }
      groupSelectsChildren = {
        true
      }
      rowData = {
        this.state.organization
      }
      columnDefs = {
        this.columnDefs
      }

      onGridReady = {
        this.onGridReady
      } >

      <
      /AgGridReact>

      <
      /div>


    }
    export default OrganizationList;

标签： reactjsag-grid-react

解决方案

不要在列定义中使用 cellRenderer，而是使用 cellRendererFramework，这样 agGridReact 就会知道您正在返回 jsx 元素。

例如：

colDefs = [{ ...{
headerName: "View",
field: "id",
colId: "view",
cellRendererFramework: function(params) {
  return <button onClick={ this.handleClick }> Test </button>
},
  },
  ....
}]

也不要忘记将单元格渲染器函数绑定到您的组件类构造函数，否则您将无法访问this.

推荐阅读