ウェブパックを使用してbabel-loaderを実行した後、 'this'はコンポーネント内で定義されていません

Question

私はES6で新しく、コードをwebpackとbabel-loaderでビルドしようとしています。

JSXファイル：

class WmSpanButton extends React.Component {  
    onClickLocal(){ 
    this.props.onClick(); // < ---- ERROR this is undefined 
}  

    render() { 
    return <button 
     onClick={this.onClickLocal} 
     className={'md-button md-blue-theme md-ink-ripple'} style={this.props.buttonStyle}> 
     <p style={{margin: '0px'}}> 
     <span style={this.props.buttonTextStyle}>{this.props.text}</span> 
     </p> 
    </button> 
    } 
} 

ウェブパックを実行した後に私が手：

var WmSpanButton = function (_React$Component) { 
     _inherits(WmSpanButton, _React$Component); 

     function WmSpanButton() { 
      _classCallCheck(this, WmSpanButton); 

      return _possibleConstructorReturn(this, Object.getPrototypeOf(WmSpanButton).apply(this, arguments)); 
     } 

     _createClass(WmSpanButton, [{ 
      key: 'onClickLocal', 

      value: function onClickLocal() { 
       console.log('hahahahahah'); 
       this.props.onClick(); 
      } 
     }, { 
      key: 'render', 
      value: function render() { 
       return React.createElement(
        'button', 
        { 
         onClick: this.onClickLocal, 
         className: 'md-button md-blue-theme md-ink-ripple', style: this.props.buttonStyle }, 
        React.createElement(
         'p', 
         { style: { margin: '0px' } }, 
         React.createElement(
          'span', 
          { style: this.props.buttonTextStyle }, 
          this.props.text 
         ) 
        ) 
       ); 
      } 
     }]); 

     return WmSpanButton; 
    }(React.Component); 

をそして、私はボタンをクリックすると、実際に私はメソッドonClickLocalを呼び出して、私はエラーを取得する：

react.min.js:14 Uncaught TypeError: Cannot read property 'props' of undefined

インラインthis.props.onClick();'this'は定義されていません

何が間違っていますか？

私のWebパック構成：

module.exports = { 
  entry: { 
tile_templates: ['./main.js'] 
}, 
  output: { 
     path: './build', 
     filename: '[name].js', 
     library: "bundle", 
     libraryTarget: "umd" 
     }, 
  module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
  } 
}; 

Answer 1

それは、webpack問題ではありません、あなただけのonClickLocal

class WmSpanButton extends React.Component { 
    constructor() { 
     this.onClickLocal = this.onClickLocal.bind(this) 
    } 

    // ... 
} 

またはあなたの代わりに.bind

<button onClick={() => this.onClickLocal() }></button> 

の arrow functionを使用することができるため thisを設定する必要があります