I am using an arrow function to bind this
inside a React component. Please see the handleChange()
function below. When I put a breakpoint inside the arrow function, I find something very strange: this
is defined, but this.props
is undefined
. In spite of all this, this.props.onChange()
is properly invoked!!! Is there an explanation for this strange behavior?
class MyComponent extends React.Component {
render() {
const { someProp } = this.props;
// <TextField> is an input component from Material UI library
return (
<TextField
onChange={this.handleChange}
/>
);
}
handleChange = event => {
const value = event.target.value;
this.props.onChange(value);
};
}
P.S. On the other hand, the render()
method behaves normally - this.props
is defined.
Update
Here's the transpiled code produced by Babel:
_this.handleChange = function(event) {
var value = event.target.value;
_this.props.onChange(value);
}