Как добавить событие onclick в рендерер ячеек ag-grid reactjs и получить доступ к функции класса

Я хотел бы добавить кнопку для столбца таблицы ag-grid в reactjs во время определения столбца time. И onclick мне нужно вызвать функцию класса. Я хотел бы создать событие onclick и передать значение params функции и сделать оттуда вызов 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;


reactjs ag-grid-react
person Santhosh A    schedule 25.02.2019    source источник
comment
Вы действительно думаете, что такой вопрос поможет нам понять реальную проблему? по крайней мере, поделитесь кодом, который вы пробовали   -  person Akshay Mulgavkar    schedule 25.02.2019
comment
Это сработало для меня cellRendererFramework: (props) => { return ( <button onClick{this.handleClick.bind(this)>Click</button> } ); }   -  person Santhosh A    schedule 05.03.2019

Ответы (1)


arrow_upward
7
arrow_downward

Вместо использования cellRenderer в определении столбца используйте cellRendererFramework, чтобы agGridReact знал, что вы возвращаете элемент jsx.

e.g:

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

также не забудьте привязать функцию рендеринга ячейки к конструктору класса компонента, иначе вы не сможете получить доступ к this.

person Sameer Reza Khan    schedule 01.03.2019
comment
TypeError: Невозможно прочитать свойство handleClick из undefined Получение этой ошибки. внес изменения, как вы сказали, дайте мне знать, если я ошибаюсь. const columnDefs = [{ { .... { headerName: "View", field: "id", colId: "view", cellRendererFramework: function(params) { return <Button onclick={this.handleClick}> View </Button> } ..... ]; class Test extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this); } - person Santhosh A; 01.03.2019
comment
handleclick не привязан к вашему классу компонента. Добавьте эту строку внутри конструктора перед this.state, this.handleClick = this.handleClick.bind(this); - person Sameer Reza Khan; 01.03.2019
comment
Вы определили определение colemn вне класса компонента, а handleClick находится внутри класса Test. Поместите columnDefs в состояние и передайте его в agGridReact при рендеринге - person Sameer Reza Khan; 01.03.2019
comment
1. Я определяю columnDefs вне класса. 2. Я не определяю состояние внутри конструктора. 3. И я определяю this.handleClick = this.handleClick.bind(this); после super(props) - person Santhosh A; 01.03.2019
comment
Вы можете сделать это в конструкторе this.columnDefs=columnDefs, а затем при рендеринге agGridReact columnDefs={this.columnDefs} - person Sameer Reza Khan; 01.03.2019
comment
Хорошо, сейчас попробую. А пока проверьте это для более четкого изображения. [stackoverflow.com/questions/54885155/ - person Santhosh A; 01.03.2019
comment
Я все еще получаю TypeError - person Santhosh A; 01.03.2019
comment
Я предлагаю поместить columnDefs внутри конструктора, если вы не используете состояние, вы можете получить к нему доступ через this.columnDefs, и он будет иметь доступ ко всем функциям вашего класса. - person Sameer Reza Khan; 01.03.2019
comment
все еще сталкивается с той же ошибкой. не могу понять, в чем я ошибаюсь. - person Santhosh A; 01.03.2019
comment
Итак, у меня есть то же самое в моем проекте, мои columnDefs находятся в состоянии, и я создал отдельную функцию, которая возвращает jsx. Этот jsx использует функции из моего класса и работает. Средство визуализации ячеек также отрендерило внутри себя другого дочернего элемента, и оно тоже работает. Не могли бы вы поделиться своим полным кодом, чтобы я мог вам помочь? - person Sameer Reza Khan; 01.03.2019
comment
Отредактируйте свой вопрос и поместите весь код этого файла, в котором вы получаете ошибку. - person Sameer Reza Khan; 01.03.2019
comment
Эй, ты можешь сделать это, пусть columnDefs = вместо this.columnDefs - person Sameer Reza Khan; 01.03.2019
comment
как я могу преодолеть эту ошибку в функциональных компонентах? в нем не используется this. - person Sanal S; 23.07.2020
comment
@sanal попробуйте без этого - person Sameer Reza Khan; 24.07.2020
comment
см. stackoverflow.com/questions/61493626/ - person Nivil Boban; 09.03.2021