React konva 连接后停止拖动

我正在使用React Konva库使用调色板创建形状。然后我拖动它来连接。但一旦它被连接，它就应该可以为组拖动，而不应该为每个项目工作

我在const中全局地将不同的形状放入变量中

const shapes=
<Group
draggable
>

<Shape
   sceneFunc={(context, shape) => {
   context.beginPath();
   context.moveTo(300, 100);
   context.lineTo(300, 100);
   context.quadraticCurveTo(150, 100, 100, 100);
   context.closePath();
   context.fillStrokeShape(shape);
   }}

   fill="#eff0f1"
   stroke="#222"

   />
   <Circle 

    x={305}
    y={100} 
    radius={10} 
    fill="#eff0f1" 
    stroke="#222"

    />
</Group>

const block=<Rect
x={2}
y={170}
width={100}
height={100}
draggable
fill="#eff0f1"
stroke="#222"
/>

const形状=
{
context.beginPath（）；
上下文。移动到（300100）；
lineTo（300100）；
二次曲线（150100100100）；
closePath（）；
fillStrokeShape（形状）；
}}
fill=“#eff0f1”
笔划=“#222”
/>
常数块=

现在，一旦我检查了调色板按钮，我就在数组中按下变量，但是一旦形状变量的连接符接触到这个变量，它就应该作为一个元素或分组连接起来

      <Stage width={950} height={585}>
                 <Layer>
                  <Group draggable>
                 {connector && multiConnector.map(shape=>{
                     return shape;
                 })}
                 {rect && multiBlock.map(block=>{
                     return block;
                 })}
                 </Group>
                 </Layer>
               </Stage>



constructor(){
        super();
        this.state={
            connector:false,
            rect:false,
            multiBlock:[],
            multiConnector:[]
        }

    }

    showConnector=() =>{
        const { multiConnector } = this.state;
        multiConnector.push(shapes);       
        this.setState({connector:true, multiConnector:multiConnector});
    }

    showRect=()=>{
        const { multiBlock } = this.state;
        multiBlock.push(block);
        this.setState({rect:true, multiBlock:multiBlock});
    }

{connector&&multicconnector.map（形状=>{
返回形状；
})}
{rect&&multiBlock.map（block=>{
返回块；
})}
构造函数（）{
超级（）；
这个州={
连接器：错误，
错误，
多块：[]，
多连接器：[]
}
}
showConnector=（）=>{
const{multiConnector}=this.state；
多连接器推送（形状）；
this.setState（{connector:true，multicconnector:multicconnector}）；
}
showRect=（）=>{
const{multiBlock}=this.state；
多块推（块）；
this.setState（{rect:true，multiBlock:multiBlock}）；
}

首先，连接符意味着形状不应该穿过矩形，或者不能进入矩形的边界

连接后，单个形状或矩形不应移动，而应像组一样集体移动