reactjs：如何訪問v15.1.0參考值

我有以下的，在ReactJS工作一段代碼v0.13.x：reactjs：如何訪問v15.1.0參考值

handleEmail: function(e) { 
     if (e.key === "Enter") { 
      var input_text = this.refs.email.getDOMNode().value;  
      // more code here .... 
     } 
    }, 
    render: function() { 
     return (
     <div className='dlg' onClick={this.handleClick}> 
      <p> 
      <span className="msg">{this.state.msg}</span> 
      <input type="text" onKeyPress={this.handleEmail} ref="email" /> 
      </p> 
     </div> 
    ) 
    }

現在我試圖把這段代碼轉換，使其與反應v15.0.1兼容，並且我已經試過這樣的事情：

handleEmail(e) { 
     if (e.key === "Enter") { 
      var input_text = ReactDOM.findDOMNode(this.refs.email).value;;  
      // more code here .... 
     } 
    } 
    render() { 
     return (
     <div className='dlg' onClick={this.handleClick}> 
      <p> 
      <span className="msg">{this.state.msg}</span> 
      <input type="text" onKeyPress={this.handleEmail} ref="email" /> 
      </p> 
     </div> 
    ) 
    }

，但失敗了，我調試的代碼，結果發現，使用最新的語法，「這」是handleEmail功能空。

有沒有人有任何暗示爲什麼以前工作，而不是現在？（和最重要的:) ...如何解決這個問題？）

來源

2016-05-23 tvs

作爲一個側面說明下面的答案，你會經常跨'.bind（本）來'在用於React的ES6類語法，這是以一種更傳統的方式完成同樣的事情（將'this'的正確上下文綁定到正在使用它的函數）。你可以用'this.handleEmail.bind（this）'來解決你的問題，但是從長遠來看，胖箭頭'=>'函數更加簡潔和方便。 –

使用ES6類的反應不會自動綁定您的處理程序this像老式React.createClass()方法一樣。所以您需要確保您使用的事件處理程序正確綁定到this。最簡單的方法是隻寫他們是這樣的：

handleEmail = (e) => { 
    if (e.key === "Enter") { 
     var input_text = ReactDOM.findDOMNode(this.refs.email).value;;  
     // more code here .... 
    } 
}; 
render() { 
    return (
     <div className='dlg' onClick={this.handleClick}> 
      <p> 
      <span className="msg">{this.state.msg}</span> 
      <input type="text" onKeyPress={this.handleEmail} ref="email" /> 
      </p> 
     </div> 
    ); 
}

注意，在你的情況下，你甚至不需要裁判。事件對象具有一個target財產，這將是input元素，所以你也可以這樣做：

handleEmail = (e) => { 
    if (e.key === "Enter") { 
     var input_text = e.target.value;;  
     // more code here .... 
    } 
}; 
render() { 
    return (
     <div className='dlg' onClick={this.handleClick}> 
      <p> 
      <span className="msg">{this.state.msg}</span> 
      <input type="text" onKeyPress={this.handleEmail} /> 
      </p> 
     </div> 
    ); 
}

來源

2016-05-23 17:18:14 Brandon

謝謝@Brandon，你的回答明確指出了我的正確方向......雖然我沒有完全使用你的解決方案（大的箭頭符號給了我一些語法錯誤），但我設法修復了代碼， .bind（this）'到'this.handleEmail' – tvs

reactjs：如何訪問v15.1.0參考值

回答

相關問題