Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React - saving a component in the ref callback

Tags:

reactjs

So, extract from 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).

It then only gives an example of using the component immediately. I'm trying to find out how i would use this function to access the component immediately, and save the component for future use, as it says we are able to do.

To continue their specific focus() and theInput example, how would i call focus() on the input element, and save it to the theInput key in refs?

Or put another way, how would i make the console.log in this fiddle return an object with a theInput key of the input element's component ref: https://jsfiddle.net/qo3p3fh1/1/

like image 291
stef Avatar asked Jun 08 '15 13:06

stef


4 Answers

I do not really understand the chosen answer, and the fiddle just returns an empty object.

Further read from this doc at the ES6 usage, you will find:

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

So what you need to do is to assign that component to a var that you can hang on to, possibly to this like in the example, and later you can use this._input to control your component.

like image 87
Khanetor Avatar answered Oct 20 '22 10:10

Khanetor


I included the code here for completeness.

HTML from your fiddle:

<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>

Updated react script 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'));
like image 36
Mark Avatar answered Oct 20 '22 11:10

Mark


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

<input type="text" ref={ function(component) { React.findDOMNode( component ).focus(); self.refs = {'theInput': component } } } />
like image 42
Phi Nguyen Avatar answered Oct 20 '22 10:10

Phi Nguyen


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>
    );
  }
};
like image 22
jk2K Avatar answered Oct 20 '22 12:10

jk2K