Warning: bind(): React component methods may only be bound to the component instance

This is common mistake everyone do with React component event handler. here i created one component with common way will invoke the error “Warning: bind(): React component methods may only be bound to the component instance. See ButtonComponent

var ButtonComponent = React.createClass({
  clickHandle: function (e) {
    console.log('Clicked!');
  },
  render: function () {
    return (
      Button({onclick:this.clickHandle, value:'Submit'});
      )
    );
  }
});

Here i called the clickHandle function directly. You cant call the handler event like this.clickHandle.

All React component event handler will be called like this.clickHandle.bind(this) or this.clickHandle.call(this). So that we can bind a null or the component on which the handler is set for the scope of the handler.

Button({onclick:this.clickHandle.bind(this), value:'Submit'});

Leave a Reply

Your email address will not be published. Required fields are marked *