React Cant Access Class Scope on Event Handler [duplicate]

Question

I am trying to create a react component which is a text input. When someone pressed enter it must call myMethod(). However in handleKeyPress, I can not access class scope. How can I fix this ?

class MyContainer extends Component { constructor(props, context) { super(props, context); } myMethod(){} handleKeyPress(target) { var self = this; if(target.charCode === 13) { this.myMethod(); } } render() { <input onKeyPress={this.handleKeyPress} ref={(input) => this.inputMax = input} type="text" /> } }

for that you need to bind the handleKeyPress, put this line in the constructor: this.handleKeyPress = this.handleKeyPress.bind(this) — Mayank Shukla
– Mayank Shukla, Commented Jul 11, 2017 at 18:37
See also: egorsmirnov.me/2015/08/16/react-and-es6-part3.html - 6 alternatives listed, choose one :) — jsalonen
– jsalonen, Commented Jul 11, 2017 at 18:38

Avraam Mavridis · Accepted Answer · 2017-07-11 18:39:09Z

You need to bind the handler.

class MyContainer extends Component { constructor(props, context) { super(props, context); this.handleKeyPress = this.handleKeyPress.bind(this); } myMethod(){} handleKeyPress(target) { var self = this; if(target.charCode === 13) { this.myMethod(); } } render() { <input onKeyPress={this.handleKeyPress} ref={(input) => this.inputMax = input} type="text" /> } }

Another solution can be to use an arrow function (which has performance drawbacks) or an @autobind decorator

T4rk1n · Accepted Answer · 2017-07-11 18:39:44Z

You need to bind the function in the constructor.

constructor(props, context) { super(props, context); this.handleKeyPress = this.handleKeyPress.bind(this) }

Collectives™ on Stack Overflow

React Cant Access Class Scope on Event Handler [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related