[React Fundamentals] Using Refs to Access Components

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}
            />
        );*/
    }
}