React-grid-layout with hooks

Question

我将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;

I onDrop事件不工作。我无法调整div的大小。拖放div后，我无法获取div的位置和大小。我搞糊涂了。请帮帮我。

Answer 1

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

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

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