ReactJS Using Refs to Access Components

by Amanda Williamson

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

var App = React.createClass({
    getInitialState: function(){
        return {             
            red: 0,
            green: 0,
            blue: 0
        }
    },
    update: function(e){
        this.setState({
            red: this.refs.red.refs.range.getDOMNode().value,
            green: this.refs.green.refs.range.getDOMNode().value,
            blue: this.refs.blue.refs.range.getDOMNode().value
        })
    },
    render:function(){
        return (
            <div>
                <Slider ref="red" update={this.update} />
                <label>{this.state.red}</label>
                <Slider ref="green" update={this.update} />
                <label>{this.state.green}</label>
                <Slider ref="blue" update={this.update} />
                <label>{this.state.blue}</label>
            </div>
        )
    }
});

var Slider = React.createClass({
    render: function(){
        return (   
            <div>
                <input ref="range" type="range" min="0" max="255" onChange={this.props.update} />
            </div>
        )
    }
})

React.renderComponent(<App />, document.body)