我将 react-grid-layout 添加到我的 react-hooks 项目中,下面是我的代码:
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import ResponsiveReactGridLayout from 'react-grid-layout';
const App = () => {
const layout = [
{ i: 'a', x: 0, y: 0, w: 4, h: 2 },
{ i: 'b', x: 4, y: 0, w: 4, h: 2 },
{ i: 'c', x: 8, y: 0, w: 4, h: 2 },
{ i: 'd', x: 0, y: 2, w: 4, h: 2 }
];
const onDrop = (event: any) => {
console.log(event);
};
return (
<div className="App">
<ResponsiveReactGridLayout
onDrop={(e) => onDrop(e)} className="layout" layout={layout} cols={12} rowHeight={50} width={1200}>
<div key="a">a</div>
<div key="b">b</div>
<div key="c">c</div>
<div key="d">d</div>
</ResponsiveReactGridLayout>
</div>
);
}
export default App;
我的 onDrop 事件不起作用。我无法调整 div 的大小。拖放 div 后,我无法获得 div 的位置和大小。我很困惑。请帮我。