javascript - React - 无法访问有状态组件事件处理程序中的引用

Question

我有一个类组件，它有一个引用内部引用input的onClick事件处理程序。但是，在事件处理程序中 input 为 null。我将事件处理程序绑定(bind)到构造函数中的 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 和 React 预设以及热重载。我的目标是 Electron 。

完整错误堆栈:

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)

编辑

想通了，请参阅下面我的回答。

Answer 1

搞清楚了，是react-hot-loader的问题。显然，使用 react-hot-loader 在构造函数中保存 this 的值不起作用。修复方法是在 babelrc 中手动启用 transform-es2015-classes 插件。

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