![\"image.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/0e2a7371-b8bb-4034-9876-23341c9cae45.png\")
\n最近、ShouldBeeのUIをReact.jsで作り始めています。
\nBabelを使ってES6のclass構文でReactのComponentを作っているのですが、どうもコールバックのメソッドでthisがundefinedになってしまいます。
例えば、下のJSはボタンのコンポーネントで、クリックしたときに、onClickメソッドが呼ばれます。onClickメソッドの中で、thisを参照していますが、undefinedになります。
import React from \"react\";\n\nexport default class Button extends React.Component {\n onClick() {\n console.log(this); // undefined\n }\n\n render() {\n return (\n <button onClick={this.onClick}>Button</button>\n );\n }\n}\nここでは、この問題を解決する方法を紹介したいと思います。解決方法は4つあります。
\n１つ目はXMLの中でthisをbindする方法です。
render() {\n return (\n <button onClick={this.onClick.bind(this)}>Button</button>\n );\n }\nReact v0.13.0 Beta 1 | Reactで紹介されている方法です。コンストラクタでバインドするというものです。
\nexport default class Button extends React.Component {\n constructor() {\n super();\n this.onClick = this.onClick.bind(this);\n }\n\n onClick() {\n console.log(this);\n }\n\n render() {\n return (\n <button onClick={this.onClick}>Button</button>\n );\n }\n}\n@autobindデコレーターを使うES7で提案されている機能のデコレーターを使う方法です。andreypopp/autobind-decoratorというライブラリが公開されていて、これをnpmでインストールしておくとメソッドに対して、@autobindデコレーターを使えるようになります。
export default class Button extends React.Component {\n @autobind\n onClick() {\n console.log(this);\n }\n\n render() {\n return (\n <button onClick={this.onClick}>Button</button>\n );\n }\n}\nFunction Bind SyntaxもまたES7で提案されている機能のひとつで、メソッドの頭に::をつけるとthisがbindできるというものです。::fooはfoo.bind(this)のシュガーシンタクスになります。React Componentの場合はXMLの中でonClick={::this.onClick}のように使うことができます。
export default class Button extends React.Component {\n onClick() {\n console.log(this);\n }\n\n render() {\n return (\n <button onClick={::this.onClick}>Button</button>\n );\n }\n}\n以上が解決策の紹介になります。なお、解決策3,4については、記事執筆時点でES7の提案中の構文になるので、変更または却下されている可能性があります。
\n"}},"pageContext":{"id":"DatoCmsPost-5142964-ja","description":"最近、ShouldBeeのUIをReact.jsで作り始めています。 Babelを使ってES6のclass構文でReactのComponentを作っているのですが、どうもコールバックのメソッドでthisがundefinedになってしまいます。 例えば、下のJSはボタンのコンポーネントで、クリックしたときに、onClickメソッドが呼ばれます。onClickメソッドの中で、thisを参照していますが、undefinedになります。 ここでは、この問題を解決する方法を紹介したいと思います。解決方法は4つあります。 解決策1: XMLの中でbind １つ目はXMLの中でthisをbindする方法です","toc":[{"tag":"h1","depth":1,"href":"#%E8%A7%A3%E6%B1%BA%E7%AD%961:%20XML%E3%81%AE%E4%B8%AD%E3%81%A7bind","text":"解決策1: XMLの中でbind","html":"解決策1: XMLの中でbind"},{"tag":"h1","depth":1,"href":"#%E8%A7%A3%E6%B1%BA%E7%AD%962:%20Autobinding%E3%82%92%E4%BD%BF%E3%81%86","text":"解決策2: Autobindingを使う","html":"解決策2: Autobindingを使う"},{"tag":"h1","depth":1,"href":"#%E8%A7%A3%E6%B1%BA%E7%AD%963:%20@autobind%E3%83%87%E3%82%B3%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%86","text":"解決策3: @autobindデコレーターを使う","html":"解決策3:@autobindデコレーターを使う"},{"tag":"h1","depth":1,"href":"#%E8%A7%A3%E6%B1%BA%E7%AD%964:%20Function%20Bind%20Syntax%E3%82%92%E4%BD%BF%E3%81%86","text":"解決策4: Function Bind Syntaxを使う","html":"解決策4: Function Bind Syntaxを使う"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFWYlZab1dUTlJaMUV5T1hSalJ6bDFXbGMxTURRMFIyNWtSMmh3WXkxUFFtcElWblZhUjFadFlWYzFiRnBQVDBKeExVOUNjWFZQUTJrdFYxWnFMVzFvYWs5UFFuSjFhVzV2TFdGNGRYVmxkR3huSm5SNGRDMXphWHBsUFRVMUpuYzlNVEl3TUNab1BUWXpNQSZibGVuZC1tb2RlPW5vcm1hbA&blend-mode=normal","otherPost":{"type":"author","title":"ブログの起承転結は読み手にとって非効率なので、結論ファーストで書いたほうがいいと思う","slug":"/posts/37"}}}}