This shows how you can use "ref"s as a data attribute hook for React components.

React using refs to access components

// learn more about refs: https://facebook.github.io/react/docs/more-about-refs.html

var App = React.createClass({
  getInitialState: function(){
    return {
      red: 0,
      green: 0,
      blue: 0
    }
  },
  update: function(){
    this.setState({
      // the key here is that "inp" is a ref attached to the input of the Slider widget
      red: this.refs.red.refs.inp.getDOMNode().value, // get the value "inp" ref on the slider named "red"
      green: this.refs.green.refs.inp.getDOMNode().value, // get the value "inp" ref on the slider named "green"
      blue: this.refs.blue.refs.inp.getDOMNode().value, // get the value "inp" ref on the slider named "blue"
    });
  },
  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="inp" type="range" min="0" max="255" onChange={this.props.update} />
      </div>
    );
  }
});