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