Reactをes6で使う場合のbindの問題

255

Last updated at 2015-08-24Posted at 2015-07-28

es6でReact.Componentを作成した場合
イベントハンドラでthisがundefinedになる

es5のReact.createClassを使った場合は、
イベントハンドラが自動でbindされるので大丈夫だった

es6

save(e){
	this.props // undefined　になる
}
render (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

es5


save = function (e){
	this.props // undefined ではない
}
render = function (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

解決策１

constructor内でbind


constructor() {
	super();
	this.save = this.save.bind(this);
}
render = function (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

jsx内でbind


render = function (){
	return (
		<button onClick={this.save.bind(this)} />保存</button>
	);
}

es6のアローファンクションを使う
eventを渡す必要がある


render = function (){
	return (
		<button onClick={(event) => this.save(event)} />保存</button>
	);
}

es7の新しいbindシンタックスを使う
※これはwebstormで構文エラーになる


render = function (){
	return (
		<button onClick={::this.save} />保存</button>
	);
}

Go to list of users who liked

219

Go to list of comments