Come accedere al contesto della tela in React

Question

Ho creato uno color picker con React e Canvas. Attualmente i componenti sono renderizzati in React e canvas è fatto con vanilla javascript. Vorrei che ne avessi due in più, quindi voglio che gli eventi click vengano gestiti con React.

Ad esempio, questo

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(); 
} 

Mi auguro sarebbe in grado di tradurre in questo

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

Ma questo non funziona perché non so come accedere context. Come posso accedere alle proprietà del canvas con React? C'è un modo per accedervi prima del clic?

UPDATE

ho usato la risposta di David, ma mi è stato sempre errori mettendo una funzione in ref così ho fatto ref="canvasBlock" e ref="canvasStrip" invece e poi assegnato il contesto in componentDidMount

Answer 1

È possibile aggiungere un attributo ref funzione sull'elemento canvas:

<canvas id="color-strip" ref={(c) => this.context = c.getContext('2d')} height="... 

Allora avrete accesso al contesto attraverso this.context:

colorStripClick: function() { 
    var imageData = this.context.getImageData(x, y, 1, 1).data 
} 

È può anche usare l'oggetto evento per accedere al nodo DOM come già indicato, ma in questo modo avrai accesso da qualsiasi luogo, non solo dai gestori di eventi.

Answer 2

Si deve solo essere accedendo al destinazione del click

colorStripClick: function(e) { 
    var ctx = e.target.getContext('2d') 
} 

Answer 3

Ti piace questa

colorStripClick: function (e) { 
    var context = e.currentTarget.getContext('2d'); 
    // your code 
} 

Example

Answer 4

Ecco il modo Reagire per rimuovere una tela dal componente:

const canvas = ReactDOM.findDOMNode(this.refs.canvas); const context = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height);

Finché è possibile destinare il Nodo DOM del reagiscono modo, si può tranquillamente accedere il rendering API Canvas.