Вызов onClick изнутри функции

Question

Я использую самоактивный рельс, и мой код имеет следующую структуру. У меня возникают проблемы с вызовом onClick с помощью кнопки, созданной внутри функции.

class AdminRevenueShareModelsSearch extends AlacrityTable {

    constructor(props) {
        super(props);   
        this.handleDelete = this.handleDelete.bind(this); 

        this.columns = [
            { path: "id", title: "ID", sort: true, isKey: true},
            { path: "name", title: "Name" },
            { path: "description", title: "Description"},
            { path: "", title: "Actions" , dataFormat: this.tableActions }

        ];
    }

   handleDelete(){
      console.log("assasa");
    }

    tableActions(cell, row, extra, index) {
      return (
        <Button
          bsStyle="default"
          onClick={this.handleDelete}
          title="Delete">
          <Glyphicon title="Delete" glyph="trash" />
        </Button>
      );
    }



render() {
    return (
      <div>
        <BootstrapTable data={ this.props.data }
                        remote={ true }
                        striped={true}
                        hover={true}
                        height={ 'auto' }
                        pagination={ true }
                        fetchInfo={ { dataTotalSize: this.props.totalDataSize } }
                        options={ {
                            sizePerPage: this.props.sizePerPage,
                            withFirstAndLast: false,
                            sizePerPageList: [ 5, 10, 20 ],
                            page: this.props.currentPage,
                            onPageChange: this.props.onPageChange,
                            onSortChange: this.props.onSortChange,
                            onFilterChange: this.props.onFilterChange,
                            noDataText: this.noDataText()
                        } }>
            {this.renderTableColumns()}
        </BootstrapTable>
      </div>
    );
}

Я ранее использовал onClick={this.handleDelete()} но получил ошибку "this.handleDelete не является функцией".

Answer 1

Вызов функции, как показано ниже.

 onClick={ () => this.handleDelete()}

также измените свой tableActions на стрелку функции.

tableActions = (cell, row, extra, index) => {
  return (
    <Button
      bsStyle="default"
      onClick={this.handleDelete}
      title="Delete">
      <Glyphicon title="Delete" glyph="trash" />
    </Button>
  );
}

Answer 2

Я предполагаю, что контекст где-то потерян (не уверен, потому что вы не предоставили саму функцию рендеринга). Попробуйте сделать функцию tableActions стрелкой:

 tableActions = (cell, row, extra, index) => {

Если это не поможет, предоставьте функцию рендера

Answer 3

Должно быть

  onClick={this.handleDelete}

Но нет

  onClick={this.handleDelete()}

Если вы хотите передать параметры в функцию, тогда () требуется как показано ниже

  onClick={e => this.handleDelete(e)}