Question

所以，摘自https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

ref属性可以是回调函数而不是名称。安装组件后将立即执行此回调。引用的组件将作为参数传入，并且回调函数可以立即使用该组件，或保存引用以供将来使用（或两者）。

然后它仅给出了立即使用该组件的示例。我试图找出如何使用此功能立即访问该组件，和保存该组件以供将来使用，正如我们所说的那样。

要继续使用特定的focus()和theInput示例，我如何在输入元素上调用focus()，并将其保存到refs中的theInput键？

或换句话说，如何让这个小提琴中的console.log返回一个带有输入元素组件的theInput键的对象ref：https://jsfiddle.net/qo3p3fh1/1/

Answer 1

我并不真正理解所选择的答案，而小提琴只会返回一个空对象。

在ES6用法的进一步阅读this doc，你会发现：

var

因此，您需要做的是将该组件分配给您可以依赖的this，可能分配给示例中的this._input，之后您可以使用{{1}}控制你的组件。

Answer 2

为了完整起见，我在此处添加了代码。

来自你小提琴的HTML：

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

更新了反应脚本，改变了使用ref的方式，在这里（https://jsfiddle.net/mark1z/q9yg70ak/）

var Hello = React.createClass({
    componentDidMount: function(){
        React.findDOMNode(this.refs['theInput']).focus();
    },
    render: function() {
        return (
          <div>
            <input type="text" ref='theInput'/>
            <input type="button" onClick={ this.submitForm } value="Submit!" />
          </div>
        );
    },
    submitForm: function() {
      console.log( this.refs['theInput'] );
    }
});

React.render(<Hello />, document.getElementById('container'));

Answer 3

我不确定这是一个好方法，但它有效。试试吧！ https://jsfiddle.net/qo3p3fh1/2/

<input type="text" ref={ function(component) { React.findDOMNode( component ).focus(); self.refs = {'theInput': component } } } />

Answer 4

ES6版

export default class Hello extends React.Component {
  componentDidMount() {
    // let textarea get focus when page loaded
    this.textArea.focus();
  }

  sendMessage(e) {
      console.log(this.textArea);
  }

  render() {
    return (    
      <textarea
        placeholder="say something..." ref={(ref) => {
          this.textArea = ref;
        }} onKeyPress={(e) => this.sendMessage(e)} autoComplete="off"
      >
      </textarea>
    );
  }
};

Answer 5

以下代码是否适合您？

var Hello = React.createClass({
    componentDidMount: function(){
       this.node.focus()
    },
    render: function() {
        return (
          <div>
            <input type="text" ref={node => this.node = node} />
            <input type="button" onClick={ this.submitForm } value="Submit!" />
          </div>
        );
    },
    submitForm: function() {
      console.log(this.node);
    }
});

React.render(<Hello />, document.getElementById('container'));

好的阅读，Why not to use findDOMNode()

React - 在ref回调中保存组件

5 个答案: