[React Fundamentals] Using Refs to Access Components

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.

 

Notice: 'ref' only works in class component, not in statless component.

 

If we don't add "ref", three slider will mutate the same state, they won't have isolated scope. 

If we want they behave differently, then we need to use it. 

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
    constructor(){
        super();
        this.state = {
            red: 0,
            green: 0,
            blue: 0
        }
    }
    update(){
        this.setState({
            red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
            green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
            blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value
        })
    }

    render() {
        return (
            <div>
                <Slider ref="red" update={this.update.bind(this)}></Slider>
                {this.state.red}
                <hr />
                <Slider ref="green" update={this.update.bind(this)}></Slider>
                {this.state.green}
                <hr />
                <Slider ref="blue" update={this.update.bind(this)}></Slider>
                {this.state.blue}
                <hr />
            </div>
        )
    }
}

class Slider extends React.Component{
    render(){
        //refs will point to the input tag
        //if you wrap input inside div
        //then you need to add another ref to the input
        //and access input like "this.refs.red.refs.inp"
        return (
            <div>
                <input type="range" ref="inp"
                       min="0"
                       max="255"
                       onChange={this.props.update}
                />
            </div>
        );
        /*return (
            <input type="range"
                   min="0"
                   max="255"
                   onChange={this.props.update}
            />
        );*/
    }
}