Кнопка в Prime React Table не работает - PullRequest
Новая
       10

Кнопка в Prime React Table не работает

0 голосов
/ 29 апреля 2018

Я использую простую реакцию для создания таблицы, последний столбец таблицы предназначен для действий, которые можно выполнить над таблицей, однако я следую за документами, но событие onClick не работает на кнопках. , Когда я нажимаю на кнопку поиска, я получаю сообщение об ошибке: «UserList.js: 19 Uncaught TypeError: _this2.selectUser не является функцией»

Любые подсказки, пожалуйста?

Код: 

actionTemplate(rowData, column) {
    console.log('column', column);
    console.log('rowData', rowData);
    return (<div>
      <Button
        type="button" icon="fa-search"
        className="ui-button-success" onClick={() => this.selectUser(1)}
      />
      <Button
        type="button" icon="fa-edit"
        className="ui-button-warning"
      />
    </div>);
  }

  selectUser(userId) {
    console.log('selectUser');
    userId = 1;
    this.props.actions.fetchUser(userId);
  }


    renderTable() {
        const paginatorLeft = <Button icon="fa-refresh" />;
            /* const users = [
                    { name: '1', email: '1981', updateDate: '', creationDate: '05/03/2016' },
                    { name: '2', email: '1982', updateDate: '', creationDate: '04/02/2017' },
            ]; */
        const { users } = this.props;
        return (
          <DataTable
            value={users} paginator paginatorLeft={paginatorLeft}
            rows={10} rowsPerPageOptions={[5, 10, 20]}
          >
            <Column field="name" header="Name" filter style={{ textAlign: 'center', width: '6em' }} />
            <Column field="email" header="Email" filter style={{ textAlign: 'center', width: '6em' }} />
            <Column field="lastUpdate" header="Last update" style={{ textAlign: 'center', width: '6em' }} />
            <Column field="creationDate" header="Creation Date" style={{ textAlign: 'center', width: '6em' }} />
            <Column body={this.actionTemplate} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
          </DataTable>
        );
      }

1 Ответ

0 голосов
/ 29 апреля 2018

Попробуйте: 

<Column body={this.actionTemplate.bind(this)} header="Actions" style={{ textAlign: 'center', width: '6em' }} />

Я предполагаю, что actionTemplate вызывается в другом контексте объекта, поэтому selectUser не определено / функция.

...