React event handlers accessing this
object should have proper this
binding
- REACT_EVENT_HANDLER_INVALID_THIS
- Error
- High
- react
This rule applies when a function accessing this
object is used as a React event handler without this
binding.
When calling an event handler, React does not provide this
object. So, if you try to access a property of this
inside the handler, a TypeError
exception is thrown.
To fix this problem, you can use Function.prototype.bind()
to specify this
object or use an arrow function.
Note: This rule may report false alarms when an unconventional automatic binding mechanism is used. We recommend disabling this rule in such cases.
Noncompliant Code Example
View with compliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { name: "John" };
}
handleClick() {
this.setState({ name: "Mary" }); // 'this' has undefined value and TypeError is thrown.
}
render() {
return (
<div onClick={this.handleClick}> {/* REACT_EVENT_HANDLER_INVALID_THIS alarm because 'this.handleClick' function is not bound with 'this'. */}
{this.state.name}
</div>
);
}
}
Compliant Code Example
View with noncompliant examples side by sideimport React from 'react';
export class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { name: "John" };
// Bind event handler inside constructor
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ name: "Mary" });
}
render() {
return (
<div onClick={this.handleClick}>
{this.state.name}
</div>
);
}
}
Version
This rule was introduced in DeepScan 1.3.0-beta.