React - 在 ref 回调中保存组件答案

【问题标题】：React - saving a component in the ref callbackReact - 在 ref 回调中保存组件
【发布时间】：2015-06-08 13:10:58
【问题描述】：

所以，从https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute中提取

ref 属性可以是回调函数而不是名称。此回调将在组件挂载后立即执行。被引用的组件将作为参数传入，回调函数可能会立即使用该组件，也可能保存引用以备将来使用（或两者兼而有之）。

然后它只给出了一个立即使用该组件的例子。我正在尝试找出我将如何使用此功能立即访问组件，并保存组件以供将来使用，正如它所说的那样，我们能够做到。

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

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

【问题讨论】：

我已经尝试返回一个值：<input type="text" ref={ function(component) { React.findDOMNode( component ).focus(); return 'theInput'; } } /> - 运气不好
我已经尝试将它手动分配给 this.refs var self = this; <input type="text" ref={ function(component) { self.refs.theInput = component; React.findDOMNode( component ).focus(); } } /> （更多的是出于绝望 - 我知道官方建议不要在渲染函数中使用 this.refs）。还是没有运气

标签： reactjs

【解决方案1】：

我不太明白选择的答案，小提琴只返回一个空对象。

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

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

因此，您需要做的是将该组件分配给您可以挂起的var，可能像示例中那样分配给this，然后您可以使用this._input 来控制您的组件。

【讨论】：

是的 - 我的问题现在有点过时了。如果我了解最新的变更日志，我认为现在所有的 refs 都是 domnodes。

【解决方案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>

更新了 react 脚本，改变了 refs 的使用方式，在这里摆弄 (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'));

【讨论】：

完美 - 谢谢！文档暗示您可以在回调中执行此操作，但这感觉像是一种正确的方法！
使用 ref 回调很容易让它聚焦，但是要检索值，您必须存储 ref 名称以便以后访问它。我认为对于这个用例，使用名为 ref 的“theInput”更干净。 ref 回调函数在组件挂载后调用，因此两种方法产生相同的功能。

【解决方案3】：

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

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

【讨论】：

【解决方案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>
    );
  }
};

【讨论】：

【解决方案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 usefindDOMNode()

【讨论】：