React - saving component in ref callback

Question

So extract from https://facebook.imtqy.com/react/docs/more-about-refs.html#the-ref-callback-attribute

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

Then it gives only an example of using the component immediately. I'm trying to figure out how I will use this function to access the component immediately and save the component for future use, as it says that we can do it.

To continue my focus() and theInput , how would I type focus() on an input element and theInput it in theInput in refs?

Or else, how to make console.log in this script return an object using theInput key of the component of the input element ref: https://jsfiddle.net/qo3p3fh1/1/

Answer 1

I have included the code here for completeness.

HTML from your violin:

 <script src="https://facebook.imtqy.com/react/js/jsfiddle-integration.js"></script> <div id="container"> <!-- This element contents will be replaced with your component. --> </div> 

Updated script response by changing the way refs are used, fiddle here ( 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 2

I really do not understand the selected answer, and the violin just returns an empty object.

Further read this document when using ES6, you will find:

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

So, you need to assign this var component to which you can hang, possibly on this , as in the example, and then you can use this._input to control your component.

Answer 3

I'm not sure if this is a good way, but it works. Give it a try! https://jsfiddle.net/qo3p3fh1/2/

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

Answer 4

ES6 Version

 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

Does the below code work for you?

 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')); 

Well read, why not use findDOMNode()