javascript - reactjs:如何访问 v15.1.0 中的 ref 值

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>
      )
  }

现在我尝试转换此代码以使其与 React 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>
      )
  }

但它失败了，我调试了代码并发现，使用最新的语法，'this' 在 handleEmail 函数中为 null。

有没有人知道为什么以前工作而不是现在？ (最重要的是 :) ...如何解决这个问题？)

Answer 1

使用 ES6 类的 React 不会像旧式 React.createClass() 方法那样将您的处理程序自动绑定(bind)到 this。因此，您需要确保您使用的事件处理程序正确绑定(bind)到 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>
      );
}