React - saving a component in the ref callback
Solution 1
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'));
Solution 2
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.
Solution 3
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 } } } />
Solution 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>
);
}
};
Related videos on Youtube
stef
Programmer and web developer. Former freelancer, now working for Architect in London. List of random characters that i associate myself with: PHP, JS, C, C++, Objective-C
Updated on September 15, 2022Comments
-
stef about 1 year
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()
andtheInput
example, how would i callfocus()
on the input element, and save it to thetheInput
key in refs?Or put another way, how would i make the
console.log
in this fiddle return an object with atheInput
key of the input element's component ref: https://jsfiddle.net/qo3p3fh1/1/ -
stef over 8 yearsperfect - thanks! the docs implied that you could do it from within the callback, but this feels like a proper way to do it!
-
Mark over 8 yearsIt's pretty easy to get it to focus with the ref callback, but to retrieve the value, you'd have to store the ref name to access it later. I think for this use case, using 'theInput' named ref is cleaner. The ref callback function is invoked after the component mounts, so both approaches produce the same functionality.
-
stef about 8 yearsyeah - my question's a bit outdated now. if i understood the latest changelog, i think all refs are domnodes now.