reactjs - 矩形移动到 React Konva 中的原始绘制位置

Question

我所做的 - 我在 React Konva 中点击和拖动鼠标制作了 2 个矩形。绘制它们后，我可以拖动并更改这些矩形的位置。但是，当我在更改先前绘制的矩形的位置后尝试制作第三个矩形时，它们会移回我不想要的原始绘制位置。我怎么解决这个问题？

这是我的代码 -

      constructor(props){
           this.state = {
           shapes : [],
           isDrawing : false,
           isDrawingMode : true,
           image : null,
           }
       }

       // I tried adding many things here but nothing worked as I wanted 
       moveRects(e) {            
        var shapesList = this.state.shapes;
        shapesList[e.target.index].x = e.target._lastPos.x;
        shapesList[e.target.index].y = e.target._lastPos.y;
        console.log(shapesList[e.target._id]);           
      }

      render() {
       return (
          <div>
            <input type = "checkbox" checked = {this.state.isDrawingMode} onChange = {this.handleCheckboxChange} />
            <label>Drawing Mode</label>

            <Stage 
                ref = 'stage'
                width = {window.innerWidth} 
                height = {window.innerHeight} 
                onContentClick = {this.handleClick} 
                onContentMouseMove = {this.handleMouseMove}
            >
              <Layer ref = 'layer'>
                <Image image = {this.state.image} />

                {this.state.shapes.map((shape) => {
                  return (
                    <Group>
                      <Rect
                        x = {shape.x}
                        y = {shape.y}
                        width = {shape.width}
                        height = {shape.height}
                        isDrawingMode = {this.state.isDrawingMode}
                        stroke = {2}
                        draggable = "true"
                        onDragEnd = {(e) => this.moveRects(e)}                                        
                        />                                              
                    </Group >
                  );
                })} 

              </Layer>
            </Stage>                
          </div>
        );
      }

标签： reactjskonvajs