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

Question

我有一个类组件，其中有一个onClick事件处理程序，它引用内部参考input。但是，事件处理程序input为空。我在构造函数中将事件处理函数绑定到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与环境和反应预置w /热重新加载。我的目标是电子。

完整的错误堆栈：

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的问题。显然保存this的值在react-hot-loader的构造函数中不起作用。修复方法是在babelrc中手动启用transform-es2015-classes插件。

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

Answer 2

我认为你正试图获得输入值。如果是的话这里是代码。没有this.input.click();方法定义

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回调为箭头的功能？这也将让你的代码变得更小：

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设置 - 但你可以忽略的那部分（通常情况下）。