React - ステートフルコンポーネントイベントハンドラの参照にアクセスできない

Question

内部参照inputを参照するonClickイベントハンドラを持つクラスコンポーネントがあります。ただし、イベントハンドラinputはnullです。コンストラクタのthisにイベントハンドラをバインドします。

import React, { Component} from 'react'; 

class MyComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 

    onClick(e) { 
    // The following throws "Cannot read property 'click' of undefined" 
    this.input.click(); 
    } 

    render() { 
    return (
     <div className="container" onClick={this.onClick}> 
     <input type="text" ref={input => this.input = input} /> 
     </div> 
    ); 
    } 
} 

はなぜthis.input私のイベントハンドラ内で定義されていませんか？

編集 明らかに、コードは正常に動作しているだけで、私の環境にはありません。私はwebpackとbabelとenvと反応プリセットをホットリロードで使用しています。私は電子をターゲットにしています。

フル・エラー・スタック：

my-component.jsx:12 Uncaught TypeError: Cannot read property 'click' of undefined 
    at MyComponent.onClick (http://localhost:8080/renderer.js:19224:15) 
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./node_modules/react-dom/lib/ReactErrorUtils.js?:69:16) 
    at executeDispatch (webpack:///./node_modules/react-dom/lib/EventPluginUtils.js?:85:21) 
    at Object.executeDispatchesInOrder (webpack:///./node_modules/react-dom/lib/EventPluginUtils.js?:108:5) 
    at executeDispatchesAndRelease (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:43:22) 
    at executeDispatchesAndReleaseTopLevel (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:54:10) 
    at Array.forEach (native) 
    at forEachAccumulated (webpack:///./node_modules/react-dom/lib/forEachAccumulated.js?:24:9) 
    at Object.processEventQueue (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:254:7) 
    at runEventQueueInBatch (webpack:///./node_modules/react-dom/lib/ReactEventEmitterMixin.js?:17:18) 

EDIT

は、以下の私の答えを参照してくださいそれを考え出しました。

Answer 1

react-hot-loaderで問題が発生しました。明らかにthisの値を保存しても、コンストラクタではreact-hot-loaderとは機能しません。この問題を解決するには、babelrcのtransform-es2015-classesプラグインを手動で有効にする必要があります。

https://github.com/gaearon/react-hot-loader/issues/597

Answer 2

入力値を取得しようとしていると思います。はいの場合はここにコードがあります。

import React from 'react'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 

    onClick(e) { 
    // The following throws "Cannot read property 'click' of undefined" 
    console.log(this.input.value); 
    } 

    render() { 
    return (
     <div className="container"> 
     <input type="text" ref={input => this.input = input} onChange={this.onClick}/> 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

Answer 3

あなたは矢印の関数として、あなたのonClickコールバックを書き換えたことがあります何のthis.input.click();メソッドの定義はありませんか？また、これはあなたのコードは少し小さくなります。

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    this.input = null; 

    onClick =() => { 
    this.input && this.input.click(); 
    } 

    render() { 
    return (
     <div className="container" onClick={this.onClick}> 
     <input type="text" ref={input => this.input = input} /> 
     </div> 
    ); 
    } 
} 

this.inputが設定されていれば、私もチェックし、問題ではないはずにもかかわらず - しかし、あなたは（通常は）その部分を無視することができます。