Ad

ReactJS Bind A Component Method The Correct Way

- 1 answer

I am trying to use .bind() when using a method in my component. The reason is simple: In a loop I am returing Components and extend them with a property which is calling a method. But for every loop-item this I want to extend the this Object with some information (like a key).

Example:

Items.jsx

Items = React.createClass({
  eventMethod() {
    console.log('this event was triggered by key:', this.key);
  },
  items() {
    let items = [];
    let properties = {};
    _.each(this.props.items, (itemData, key)=>{
      properties.eventMethodInItem = this.eventMethod.bind(_.extend(this, {
        key
      }));
      let {...props} = properties;
      let item = <Item {...props} key={key} />;
      items.push(item);
    });
    return items;
  },
  render() {
    return(<div>{this.items()}</div>);
  }
});

Item.jsx

Item = React.createClass(...);

In this case (and its working) when the Item Component is triggering the prop "eventMethodInItem" my method "eventMethod" will be called and this.key has the correct value!

So - whats now the question ? Its working perfect, right ?

Yes.

But ReactJS does not want me to do this. This is what ReactJS is telling me as a console log.

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See Items

Maybe you think its a "bad" way to add children to the component like I am doing it but in my special case I need to do this in this way - so I need to bind new information to a method.

Ad

Answer

I'm not going to pretend that I understand what you are trying to do here, but maybe I can help clear it up anyway.

React takes all of the top level methods found on each component and automagically binds them to the context of the component.

This prevents other methods from overriding the context of this and as a result, if you try to rebind the method, React says "Hey don't bother. I already got it" — which is the warning you are seeing.

Assuming that you really want do this (each time you are mutating the outer properties object by overriding the eventMethodInItem property).

properties.eventMethodInItem = this.eventMethod.bind(_.extend(this, {
  key
}));

Then I can't see any reason that the eventMethod has to live on the component, rather than just in the scope of the items function.

items() {
  const eventMethod = function() {
    console.log('this event was triggered by key:', this.key);
  }
  // ...
  _.each(this.props.items, (itemData, key)=>{
    properties.eventMethodInItem = eventMethod.bind(_.extend(this, {
      key
    }));
    // ...
  });
},

That way you don't have to fight React to get your program to work.

Ad
source: stackoverflow.com
Ad