CODEWITHSUNDEEP
javascriptreactjs
Combine
Combine

Reputation: 4214

React/JS - How to pass additional parameters to onClick handler

The scenario is simple - I have some spans that when I click on them I use the event "e" to track what element the user clicked on (I have many elements like this) so getting the "e.target" is pretty simple from onClick like this: 

React.createElement('span', {
    onClick: this._toggleIcons
}, span);

_toggleIcons: function(e){
    $(e.target).toggleClass("show");
},

So far so good.

However now I need to pass some additional parameters to the event "e" but I don't know how to do that. I cannot see whether this is possible/impossible.

React.createElement('span', {
    onClick: this._toggleRemoveOption( ?params? )
}, span2);

_toggleRemoveOption: function(e, param1, param2){
    $(e.target).toggleClass("remove");

    console.log(e.target);
    console.log(param1);
    console.log(param2);
},

So my question is this - how to white my onClick event handler parameters so that I can use them (param1, param2) and also have access to "e.target"?

Thank you

Upvotes: 1

Views: 1224

Answers (2)

Njain
Njain

Reputation: 46

Use bind:

React.createElement('span', {
        onClick: this._toggleRemoveOption.bind(null, param1, param2)
    }, span2);


    _toggleRemoveOption: function(param1, param2, e){
        $(e.target).toggleClass("remove");

        console.log(e.target);
        console.log(param1);
        console.log(param2);
    },

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Create a new function (es5ify way)

React.createElement('span', {
    onClick: (function(_this){
      return function(e) {
        _this._toggleRemoveOption(e, 'param1', 'param2')
      }
    }(this))

}, span2);

Or

React.createElement('span', {
    onClick: function(e) {
        this._toggleRemoveOption(e, 'param1', 'param2')
    }.bind(this)

}, span2);

Upvotes: 3

Related Questions