如何在React

Question

我使用React和Canvas制作了color picker。目前，组件在React中呈现，canvas使用vanilla javascript完成。我希望两个网格更多，所以我希望用React处理点击事件。

例如，这个

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

我希望能够翻译成这个

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

但这不起作用，因为我不知道如何访问context。如何使用React访问画布属性？有没有办法在点击之前访问它？

更新

我使用了大卫的答案，但我在ref中添加了一个函数，因此我做了ref="canvasBlock"和ref="canvasStrip"，然后在{{1}中分配了上下文}}

Answer 1

您可以在ref元素上添加canvas函数属性：

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

然后您可以通过this.context

访问上下文

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

您也可以使用事件对象访问已经指出的DOM节点，但这样您就可以从任何地方访问，而不仅仅是事件处理程序。

Answer 2

根据React16，您可以使用React.createRef()

class ColorPicker extends React.Component {
constructor(props) {
   super(props);

   this.colorPickerRef = React.createRef();
}

componentDidMount() {
   this.context = this.colorPickerRef.current.getContext('2d');
}

render() {
   return (
      <canvas ref={this.colorPickerRef} />
   )
}
}

Answer 3

它应该只是访问点击目标

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

Answer 4

喜欢这个

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

Example

Answer 5

以下是从组件中删除画布的React方法：

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

只要你能以反应的方式定位DOM Node，你几乎可以访问Canvas Rendering API。

Answer 6

这是带有react hooks的答案：

export default function Canvas() {
  const ref = React.useRef()

  React.useEffect(() => {
    ref.current.getContext('2d')
  }, [])

  return <canvas ref={ref} />
}