I made a color picker with React and Canvas. Currently the components are rendered in React and canvas is done with vanilla javascript. I'd like to two to mesh more, so I want the click events to be handled with React.

For example, this

colorStrip.addEventListener(click, click, false);



function click(e) {

  x = e.offsetX;

  y = e.offsetY;

  var imageData = context.getImageData(x, y, 1, 1).data;

  rgbaColor = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';

  fillGradient();

}

I would hope would be able to translate to this

var ColorPicker = React.createClass({

  colorStripClick: function() {

    //handle click events here

  },

  render: function() {

    var styles = {

      opacity: this.props.isVisible ? '1' : '0'

    };

    return(

      <div id=color-picker style={styles}>

        <canvas id=color-block height=150 width=150></canvas>

        <canvas id=color-strip height=150 width=30 onClick={this.colorStripClick}></canvas>

      </div>

    );

  }

});

But that doesn't work because I don't know how to access context. How can I get access to the canvas properties with React? Is there a way to access it before the click?

UPDATE

I used David's answer but I was getting errors by putting a function in ref so I did ref=canvasBlock and ref=canvasStrip instead and then assigned the context in componentDidMount