Question

我尝试使用React进行绘制。简单的onMouseMove事件不起作用。我不知道我在做什么错，但是它仅显示状态的第一位置，因此坐标为0、0的矩形。也许它与生命周期有关？不幸的是，画布上有很多东西，但是React却没有。

class App extends Component {

 state = { x: 0,
           y: 0
         }

 handleMouseMove(event) {
     this.setState({
       x: event.clientX,
       y: event.clientY
     });
  }


 componentDidMount() {
  const canvas = this.refs.canvas;
  canvas.width = 1000;
  canvas.height = 600;
  const ctx = canvas.getContext("2d");
  ctx.fillRect(this.state.x, this.state.y, 15,15)
 }
 render() {

   return (
     <div>

      <canvas ref="canvas"
        onMouseMove={e=>this.handleMouseMove(e)}>
      and now what!
      </canvas>
     </div>

   );
 };
}

Answer 1

我将分部分回答这个问题。

您的实现有什么问题？

您正在尝试用画布粘合状态，这很好。但是你在哪里做？

内部： componentDidMount ，从docs仅调用一次，因此您看到初始的0,0位置。

但是等等！！！我正在更新状态，并且应该更新其他所有内容吗？

不！为什么？

ctx.fillRect(this.state.x, this.state.y, 15,15) // this place updates the canvas properties

如果您观察到ctx实际上是对canvas dom元素的纯js引用。 这不是反应组件！

解释更多！

如果将画布包裹在组件内部并传递坐标作为道具，则一切都会顺利进行，因为当父级状态更改时react将更新子级。

类似这样的东西：

const Canvas = (props) =>  <canvas ref="canvas" width={props.x} height={props.y}
        onMouseMove={e=>this.handleMouseMove(e)}>
      and now what!
  </canvas>


class App extends Component {

 state = { x: 0,
           y: 0
         }

 handleMouseMove(event) {
     this.setState({
       x: event.clientX,
       y: event.clientY
     });
  }


 componentDidMount() {
 }
 render() {

   return (
     <div>

      <Canvas x={this.state.x} y={this.state.y} />
     </div>

   );
 };
}

或者第二种方法是自己进行更新。即挂钩到react的更新生命周期，每当状态更新发生时，都要监听react的回调（componentDidUpdate）并自己进行计算。

Working js fiddle: here

当React使用Canvas时-绘图

1 个答案: