Javascript 使用ResponsiveReactGridLayout上的react grid layout将项目放置在错误的位置

我不熟悉react网格布局，我已经用这个例子创建了一个拖放示例。当项目被删除时，它总是放置在网格的第一列。警报中的X和Y是正确的， 我的代码有什么问题？ 这是我的代码：

    onDrop = (layout, layoutItem, _event) => {
          alert(`Dropped element props:\n${JSON.stringify(layoutItem, ['x', 
          'y', 'w', 'h'], 2)}`);
             this.setState(prevState => ({
                  layouts: {
                  ...prevState.layouts,
                  [prevState.currentBreakpoint]: [
                   ...prevState.layouts[prevState.currentBreakpoint],
                   layoutItem
                ]
             }
         }));
      };

    render() {
    return (

        <div>
            <div className="toolBar">
                <div
                    className="droppable-element"
                    draggable={true}
                    unselectable="on"
                >
                    Button 1
                </div>
            </div>
            <div>
                <ResponsiveReactGridLayout
                    {...this.props}
                    layouts={this.state.layouts}
                    onBreakpointChange={this.onBreakpointChange}
                    onLayoutChange={this.onLayoutChange}
                    onDrop={this.onDrop}
                    droppingItem={this.props.item}
                    measureBeforeMount={false}
                    useCSSTransforms={this.state.mounted}
                    compactType={this.state.compactType}
                    preventCollision={true}
                    isDroppable={true}
                >
                    {this.generateDOM()}
                </ResponsiveReactGridLayout>
            </div>
        </div>
    );
}

onDrop=（布局、布局项目、事件）=>{
警报（`droplementprops:\n${JSON.stringify（layoutItem，['x'，
‘y’、‘w’、‘h’]，2）}`）；
this.setState（prevState=>({
布局：{
…prevState.layouts，
[prevState.currentBreakpoint]：[
…prevState.layouts[prevState.currentBreakpoint]，
布局项目
]
}
}));
};
render（）{
返回(
按钮1
{this.generateDOM（）}
);
}

我明白了。我将datagrid={el}添加到应该删除的元素中。这是代码

   import React from "react";
   import _ from "lodash";
   import { Responsive, WidthProvider } from "react-grid-layout";
   const ResponsiveReactGridLayout = WidthProvider(Responsive);

    export default class DragFromOutsideLayout extends React.Component {
       static defaultProps = {
       className: "layout",
       rowHeight: 30,
       onLayoutChange: function () { },
       cols: { lg: 8, md: 5, sm: 6, xs: 4, xxs: 2 },
       verticalCompact: false,
       preventCollision: true
     };

  state = {
    currentBreakpoint: "lg",
    compactType: "horizontal",
    mounted: false,
    layouts: { lg: generateLayout() },
    newCounter: 0
};

generateDOM(el) {
    return (
        <div key={el.i} data-grid={el}>
            <span className="text">{el.i}</span>
        </div>
    );
   }

  onBreakpointChange = breakpoint => {
    this.setState({
        currentBreakpoint: breakpoint
    });
  };

 onCompactTypeChange = () => {
    const { compactType: oldCompactType } = this.state;
    const compactType =
        oldCompactType === "horizontal"
            ? "vertical"
            : oldCompactType === "vertical"
                ? null
                : "horizontal";
    this.setState({ compactType });
};
onDrop = (layout, layoutItem, _event) => {
    this.setState({
        layouts: {
            lg: this.state.layouts.lg.concat({
                i: this.state.newCounter.toString(),
                x: layoutItem.x,
                y: layoutItem.y,
                w: layoutItem.w,
                h: layoutItem.h
            })
        },
        newCounter: this.state.newCounter + 1
    });
  };

 render() {
    return (
        <div>
            <div className="toolBar">
                <div
                    className="droppable-element"
                    draggable={true}
                    unselectable="on"
                >
                    Button 1
                    </div>
            </div>
            <div className="space"></div>
            <div className="gridL">
                <span>Drop the item here</span>
                <ResponsiveReactGridLayout
                    {...this.props}
                    onDrop={this.onDrop}
                    droppingItem={this.props.item}
                    measureBeforeMount={false}
                    useCSSTransforms={this.state.mounted}
                    compactType={this.state.compactType}
                    preventCollision={true}
                    isDroppable={true}
                >
                    {_.map(this.state.layouts.lg, el => this.generateDOM(el))}
                </ResponsiveReactGridLayout>
            </div>
        </div>
    );
  }
}

function generateLayout() {
   return _.map(_.range(0, 0), function (item, i) {
      var y = Math.ceil(Math.random() * 4) + 1;
       return {
         x: Math.round(Math.random() * 5) * 2,
         y: Math.floor(i / 6) * y,
         w: 2,
         h: y,
         i: i.toString(),
         static: Math.random() < 0.05
      };
   });
  }
const containerElement = document.getElementById('root');
ReactDOM.render(<DragFromOutsideLayout />, containerElement);

从“React”导入React；
从“洛达斯”进口；
从“react grid layout”导入{Responsive，WidthProvider}；
const ResponsiveReactGridLayout=WidthProvider（响应型）；
导出默认类DragFromOutsideLayout扩展React.Component{
静态defaultProps={
类名：“布局”，
行高：30，
onLayoutChange:function（）{}，
cols:{lg:8，md:5，sm:6，xs:4，xxs:2}，
垂直压缩：错误，
防止碰撞：对
};
状态={
当前断点：“lg”，
紧凑型：“水平”，
错,，
布局：{lg:generateLayout（）}，
新计数器：0
};
生成域（el）{
返回(
{el.i}
);
}
onBreakpointChange=断点=>{
这是我的国家({
当前断点：断点
});
};
onCompactTypeChange=（）=>{
const{compactType:oldCompactType}=this.state；
常数压缩型=
oldCompactType==“水平”
？“垂直”
：oldCompactType==“垂直”
无效的
：“水平”；
this.setState（{compactType}）；
};
onDrop=（布局、布局项目、事件）=>{
这是我的国家({
布局：{
lg:this.state.layouts.lg.concat({
i:this.state.newCounter.toString（），
x:layoutItem.x，
y:布局项目y，
w:layoutItem.w，
h:布局项目
})
},
newCounter:this.state.newCounter+1
});
};
render（）{
返回(
按钮1
把这个项目放在这里
{{.map（this.state.layouts.lg，el=>this.generateDOM（el））}
);
}
}
函数generateLayout（）{
返回映射（范围（0，0），函数（项，i）{
var y=Math.ceil（Math.random（）*4）+1；
返回{
x:Math.round（Math.random（）*5）*2，
y：数学楼层（i/6）*y，
w:2，
h:y，
i:i.toString（），
静态：Math.random（）<0.05
};
});
}
const containerElement=document.getElementById（'root'）；
render（，containerElement）；