1

我将 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 的位置和大小。我很困惑。请帮我。

4

1 回答 1

0

请不要忘记将“isDroppable”属性添加到 ResponsiveReactgridlayout 组件,例如<ResponsiveReactGridLayout isDroppable={true} ...> ... </ResponsiveReactGridLayout>.

只有在将外部组件拖放到网格中时才会触发 drop 事件。您可以在库的演示部分中找到一个示例。请使用以下链接。

https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/15-drag-from-outside.jsx

于 2021-09-17T18:50:42.713 回答