Calling onClick from within function

Question

I am using react-rails gem and my code has the following structure. I am having difficulty calling onClick from a button generated from within a function.

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>
    );
}

I had previously used onClick={this.handleDelete()} but got the error "this.handleDelete is not a function".

Could you describe what your difficulty actually is? `onClick={this.handleDelete}` is the correct construction – you want to pass in the reference to the function itself. Your previous attempt, `onClick={this.handleDelete()}` would call the handleDelete function and then pass its returning value to the Button object. — ScottM, Sep 12 '18 at 10:27
I thought the same but its not working. Was wondering that, as the onclick is generated within a function, there may be an issue with how its called. — user3385136, Sep 12 '18 at 10:43
You may need to move handleDelete(){ console.log("assasa"); } function down to tableActions function — Hemadri Dasari, Sep 12 '18 at 10:57
@user3385136 I use this approach to pass in event handling functions to child components fine. I don't know what you mean by "its not working". I assume `tableActions` is called by the parent class's `render()` function, and that your `Button` component is set up to receive a function as a prop? — ScottM, Sep 12 '18 at 11:23
@ScottMatthewman apologies for not being clear. So as I understand it columns containing the call for tableActions is defined in the constructor. Then in render (added to question code) bootstrap table is called which pulls in the columns which have defined tableActions, which in turn attempts to call handleDelete on click. Can you provide sample code as an answer so I can try it to make sure I havent missed anything. — user3385136, Sep 12 '18 at 11:31

Amruth · Answer 1 · 2018-09-12T10:56:09.057

2

Call function like below.

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

also change your tableActions to arrow function.

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

edited Sep 12 '18 at 10:56

answered Sep 12 '18 at 10:25

Amruth

5,792
2
28
41

Changing to the above results in ``Uncaught TypeError: _this.handleDelete is not a function`` and points to the code: ``onClick: function () { return _this.handleDelete(); },`` – user3385136 Sep 12 '18 at 10:40
1

from where that `_` came ? – Amruth Sep 12 '18 at 10:40
Sorry can you clarify the above? Not sure where it comes from. Not defined that way. – user3385136 Sep 12 '18 at 10:42
in question you asked `this.handleDelete` but now you are telling me `_this.handleDelete`. better you post your updated code – Amruth Sep 12 '18 at 10:47
That's the thing. All i did was change ``onClick={this.handleDelete()}`` to ``onClick={ () => this.handleDelete()}`` Dont know where the underscore is coming from. – user3385136 Sep 12 '18 at 10:52

score 0 · Answer 2 · answered Sep 12 '18 at 10:45

0

I guess the context is lost somewhere (not sure, because you haven't provided render function itself). Try to make tableActions function arrow function:

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

If this won't help, please provide render function

answered Sep 12 '18 at 10:45

Azamat Zorkanov

779
1
4
9

score 0 · Answer 3 · answered Sep 12 '18 at 10:49

0

Should be

  onClick={this.handleDelete}

But not

  onClick={this.handleDelete()}

If you want to pass params to a function then () required like below

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

answered Sep 12 '18 at 10:49

Hemadri Dasari

32,666
37
119
162

Calling onClick from within function

3 Answers3