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

Question

我有以下的，在ReactJS工作一段代碼v0.13.x：

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功能空。

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

Answer 1

使用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> 
    ); 
}