关于reactjs：React-将组件保存在ref回调中


React - saving a component in the ref callback

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

The ref attribute can be a callback function instead of a name. This callback will be executed immediately after the component is mounted. The referenced component will be passed in as a parameter, and the callback function may use the component immediately, or save the reference for future use (or both).

然后仅给出立即使用该组件的示例。 我试图找出如何使用此功能立即访问组件，并保存该组件以备将来使用，因为它说我们能够做到。

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

或换种说法，我如何使此提琴中的console.log返回带有输入元素的组件ref的theInput键的对象：https://jsfiddle.net/qo3p3fh1/1/

相关讨论

我不太了解所选的答案，小提琴只返回一个空对象。

在ES6用法的基础上进一步阅读该文档，您会发现：

1
2
3
4
5
6
render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

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

相关讨论

为了完整起见，我在此处包括了代码。

小提琴中的HTML：

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


    <!-- This element's contents will be replaced with your component. -->

更新了react脚本，更改了引用的使用方式，请在此处拨弄(https://jsfiddle.net/mark1z/q9yg70ak/)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Hello = React.createClass({
    componentDidMount: function(){
        React.findDOMNode(this.refs['theInput']).focus();
    },
    render: function() {
        return (
         
            <input type="text" ref='theInput'/>
            <input type="button" onClick={ this.submitForm } value="Submit!" />
         
        );
    },
    submitForm: function() {
      console.log( this.refs['theInput'] );
    }
});

React.render(<Hello />, document.getElementById('container'));
相关讨论

ES6版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
    );
  }
};

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

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

以下代码对您有用吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Hello = React.createClass({
    componentDidMount: function(){
       this.node.focus()
    },
    render: function() {
        return (
         
            <input type="text" ref={node => this.node = node} />
            <input type="button" onClick={ this.submitForm } value="Submit!" />
         
        );
    },
    submitForm: function() {
      console.log(this.node);
    }
});

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

一本好书，为什么不使用findDOMNode()