refs to Components

After building your component, you may find yourself wanting to “reach out” and invoke methods on component instances returned from render().  This can be achieve from refs  in react based project. Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state.

refs can be  as string attribute or callback method. Here’s how we can use it in both cases.

refs as string attribute

1. Assign a ref attribute to anything returned from render such as:

   <input ref="myInput" />
   

2. In some other code (typically event handler code), access the backing instance via this.refs as in:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

 

refs as callback method

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

componentDidMount() {
this._input.focus();
},

 

Benefits:

• You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as this.refs.myTypeahead.reset()). In most cases, it’s clearer to use the built-in React data flow instead of using refs imperatively.
• Performing DOM measurements almost always requires reaching out to a “native” component such as <input /> and accessing its underlying DOM node using a ref. Refs are one of the only practical ways of doing this reliably.
• Refs are automatically managed for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).

Cautions:

• Never access refs inside of any component’s render method – or while any component’s render method is even running anywhere in the call stack.
• If you want to preserve Google Closure Compiler advanced-mode crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using this.refs['myRefString'] if your ref was defined as ref="myRefString".
• If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to “make things happen” – instead, the data flow will usually accomplish your goal.
• Refs may not be attached to a stateless function, because the component does not have a backing instance. You can always wrap a stateless component in a standard composite component and attach a ref to the composite component.

Sample Example

---

To demonstrate the refs things, here i have attached the sample project where there are three switch to indicate red, green, blue value of a color.  On sliding the switch will show respective change value in RGB indicator.

Download full source code of PropsAndState from github repo .
Make sure you run npm install inside PropsAndState directory.