javascript - React 的 getDOMNode 总是返回组件的根 DOM 节点而不是引用的节点

Question

我正在努力在 React 中使用 refs。它们总是返回组件的根 DOM 节点而不是引用的节点。

请考虑以下示例:

  var AuthApp = React.createClass({
    onSubmitClick: function(event) {
      var usernameInput = this.getDOMNode(this.refs.username);

      // This logs root <div> instead of <input>, why???
      console.log(usernameInput); 
    },


    render: function() {
      return (
        <div>
          <input type="text" ref="username"/>
          <input type="password" ref="password"/>
          <input type="submit" onClick={this.onSubmitClick} />
        </div>
      );
    }
  });

我检查了优秀的 Chrome React 插件中的代码，似乎 this.refs.username正确反射(reflect) <input>标签:

当我调用 this.getDOMNode 时发生错误- 它返回根 <div>在 render() 中指定而不是 <input> .

此代码来自 React 0.12，但我尝试在 0.13 上执行相同的操作(我知道对 React.findDOMNode() 的更改)并且我得到了相同的结果。

我做错了什么？

Answer 1

你应该使用

var usernameInput = React.findDOMNode(this.refs.username);

使用 refs 获取对组件的 DOM 节点的引用。

getDOMNode 方法有 been deprecated

getDOMNode is deprecated and has been replaced with React.findDOMNode().