添加/删除ReactGridLayout数组元素不能正常运行

Question

我目前正在尝试创建一个基本程序，该程序允许我使用React库和ReactGridLayout在JS中添加/删除可调整大小的可移动块。但是，当我尝试实现它时，看来GridItems是使用适当的属性创建的，但实际上我无法移动它们或调整它们的大小。为了使此功能起作用，需要更改什么。该应用程序基于以下示例：

import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
        <div key="a">a</div>
        <div key="b">b</div>
        <div key="c">c</div>
      </GridLayout>
    )
  }
}

应用文件

import React, { Component } from "react";
import GridLayout from "react-grid-layout";
import MyFirstGrid from "./components/box2";
import "./App.css";
import "C:/Users/night/Desktop/reactapp/box-app/node_modules/react-grid-layout/css/styles.css";
import "C:/Users/night/Desktop/reactapp/box-app/node_modules/react-resizable/css/styles.css";

class App extends Component {
  constructor() {
    super();
    this.postID = 0;
    this.state = {
      layout: [
        { id: "a", x: 0, y: 0, w: 1, h: 2 },
        { id: "b", x: 1, y: 0, w: 3, h: 2 },
        { id: "c", x: 4, y: 0, w: 1, h: 2 }
      ]
    };
  }

  deleteEvent = index => {
    const copyPostArray = Object.assign([], this.state.layout);
    copyPostArray.splice(index, 1);
    this.setState({
      layout: copyPostArray
    });
  };

  addPost = () => {
    this.postID = this.postID + 1;
    const copyPostArray = Object.assign([], this.state.layout);
    copyPostArray.push({
      id: this.postID,
      x: 0,
      y: 0,
      h: 0,
      w: 0
    });
    this.setState({
      layout: copyPostArray
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.addPost}>Add</button>
        <GridLayout
          className="layout"
          layout={this.state.layout}
          cols={12}
          rowHeight={30}
          width={1200}
        >
          {this.state.layout.map((post, index) => {
            return (
              <MyFirstGrid
                key={post.id}
                id={post.id}
                x={post.x}
                y={post.y}
                h={post.h}
                w={post.w}
                delete={this.deleteEvent.bind(this, index)}
              />
            );
          })}
        </GridLayout>
      </div>
    );
  }
}

export default App;

.jsx文件

    import React, { Component } from "react";

class MyFirstGrid extends Component {
  state = {};

  render() {
    // layout is an array of objects, see the demo for more complete usage

    return (
      <div
        key={this.props.id}
        x={this.props.x}
        y={this.props.y}
        h={this.props.h}
        w={this.props.w}
      >
        {this.props.id}
        <button onClick={this.props.delete}>Delete</button>;
      </div>
    );
  }
}

export default MyFirstGrid;