This repository was archived by the owner on Jul 19, 2019. It is now read-only.
Repository navigation
This repository was archived by the owner on Jul 19, 2019. It is now read-only.
Event handlers complain when attaching component method #37
Description
I have added an onClick handler to the group component but I am getting this warning in my console:
bind(): React component methods may only be bound to the component instance. See Component
Here is a shortened version of my component which exhibits the warning. (Plain JS, no JSX)
var Component = React.createClass({
displayName: 'Component',
handleClick: function (event) {
console.log('Clicked!');
},
render: function () {
return (
Surface({ width: 320, height: 480 },
Group({ onClick: this.handleClick })
)
);
}
});I believe it has to do with the fact that Group is a React component and that it should only be binding its own methods to the event listener. Is there a way to put this together without getting this warning?
Activity
logicallyincorrect commentedon Mar 3, 2015
Any react component change handler will be called much like this.handleClick.bind(this) or this.handleClick.call(this). Therefore, the easiest way to get around the message is bind a null or the component on which the handler is set for the scope of the handler like:
ThomWright commentedon May 13, 2015
@dmitrif Trying that gives me this:
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 exportsI think the problem comes from ReactART.js line 293. How come listeners are bound to
this?My (quick and hacky) solution takes advantage of ReactART.js line 295:
sophiebits commentedon May 13, 2015
@ThomWright That .call shouldn't cause the warning. Not sure off the top of my head what causes it; probably something in art internals.
ThomWright commentedon May 13, 2015
Really? Maybe I'm missing something (not unlikely!) but the warning says
React component methods may only be bound to the component instance.In this case, the
.call()is trying to bind a component method (myClickHandlerin my case) to something else.sophiebits commentedon May 13, 2015
If you look at the implementation of that warning in the React repo you'll see that it intercepts .bind calls, not .call. It's mostly meant as a warning to prevent people from binding unnecessarily and creating extra garbage.
ThomWright commentedon May 13, 2015
Ah, gotcha. Having a quick look at the ART internals it does indeed look like it's calling
.bindon listeners.luodaxu commentedon Jul 7, 2015
try use null instead of this
ConAntonakos commentedon Jul 14, 2015
So, when you
.bind(null, ...), theeventparameter is undefined. But I need it as a parameter so that Firefox doesn't spit errors. Any ideas?sophiebits commentedon Jul 15, 2015
That doesn't sound right. The first arg is used as context (i.e.,
this), not as the first arg of the called function.ConAntonakos commentedon Jul 15, 2015
Thanks, @spicyj. I cleared up my misunderstanding. In Chrome, I was realizing I didn't have to explicitly define the
eventparameter of the called func in a React component. Yet in Firefox, I wasn't given that flexibility.joshma commentedon Aug 18, 2015
@ThomWright were you ever able to resolve the bind warning? We're on React 0.12 and it looks the same - the source of the warning comes from https://github.com/sebmarkbage/art/blob/master/dom/dummy.js#L100 - it's binding a function which, in this case, is a React component's function.
ThomWright commentedon Aug 18, 2015
@joshma Nothing better than my
makeListenerhack above.tara1128 commentedon Apr 26, 2016
You can cache the React component instance into a variable, instead of using "this",
because "this" means the DOM element itself in some cases.
Like this:
render: function() {
var component = this;
return (
......... onClick={component.handleClick.bind(component)} ....
)
}
It works in my project :-)
vaskort commentedon Dec 29, 2016
I had this error when my function call was like this:
onPress={ this.props.onAddLocation(markerLocation) }but changed it to:
onPress={ this.props.onAddLocation.bind(this, markerLocation) }