Reactjs 在一个形状上使用onClick事件创建新形状

我正在使用react和konva，我想使用onClick在页面上呈现一个新的形状

class Rectangle extends Component {
    render() {
        return(
        <Rect 
            x={250}
            y={25}
            width={50}
            height={100}
            stroke="black"
            draggable
            fill={blue}
            onDragStart={() => {
                isDragging: true
            }}
            onDragEnd={() => (
                isDragging: false
            )}
        />
        );
    };
}
class Rectangle3 extends Component{
        render () {
        return(
            <Rect onClick={<Rectangle/>}
            x={380}
            y={85}
            width={100}
            height={50}
            stroke="black"
            />
        )
    }
}

类矩形扩展组件{
render（）{
返回(
{
伊斯特拉格：是的
}}
onDragEnd={（）=>(
IsDraging:错误
)}
/>
);
};
}
类矩形3扩展组件{
渲染（）{
返回(
)
}
}

我收到一条错误消息

---

未捕获的TypeError:events[i].handler.call不是一个函数

有几种方法可以实现这一点，但最简单的方法是映射

高度

、

宽度

、

x

和

y

值

例如，这里有一个

JSON数组

：

[
  {
    x: 250
    y: 25
    width: 50
    height: 100
  },
  {
    x: 121
    y: 157
    width: 64
    height: 49
  },
  {
    x: 201
    y: 167
    width: 11
    height: 47
  }
   ...etc
];

利用

JSON数组

with，这里有一种方法

工作示例：（单击一个矩形以创建一个新矩形…或简单地单击并按住以在画布上拖动当前选定的矩形）

组件/App.js

import React, { Component } from "react";
import Konva from "konva";
import { Stage, Layer, Rect } from "react-konva";

// creates a random number between 1 and a number parameter passed in as "num"
const random = num => Math.floor(Math.random() * num) + 1;

// creates a new object with random: x, y, width, and height values (the number passed in represents a maximum value)
const newRectangle = () => ({
  x: random(250),
  y: random(300),
  width: random(100),
  height: random(100)
});

export default class App extends Component {
  // initializing state with a canvas JSON Array with a default rectangle
  state = {
    canvas: [
      {
        x: 250,
        y: 25,
        width: 50,
        height: 100
      }
    ]
  };

  // when clicking on a rectangle, it creates a new rectangle by spreading out previous canvas values and adding a new set of values
  handleClick = () => {
    this.setState(prevState => ({
      canvas: [...prevState.canvas, { ...newRectangle() }]
    }));
  };

  // handles rectangle dragging
  handleDragStart = e => {
    e.target.setAttrs({
      shadowOffset: {
        x: 15,
        y: 15
      },
      scaleX: 1.1,
      scaleY: 1.1
    });
  };

  // handles rectangle dropping
  handleDragEnd = e => {
    e.target.to({
      duration: 0.5,
      easing: Konva.Easings.ElasticEaseOut,
      scaleX: 1,
      scaleY: 1,
      shadowOffsetX: 5,
      shadowOffsetY: 5
    });
  };

  render = () => (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {this.state.canvas.map(({ height, width, x, y }, key) => ( // like a "for loop", this maps over this.state.canvas objects and pulls out the height, width, x, y properties to be used below
          <Rect
            key={key}
            x={x}
            y={y}
            width={width}
            height={height}
            stroke="grey"
            draggable
            fill="blue"
            shadowOffset={{ x: 5, y: 5 }}
            onDragStart={this.handleDragStart}
            onDragEnd={this.handleDragEnd}
            onClick={this.handleClick}
          />
        ))}
      </Layer>
    </Stage>
  );
}

import React，{Component}来自“React”；
从“Konva”进口Konva；
从“react konva”导入{Stage，Layer，Rect}；
//创建一个介于1和作为“num”传入的数字参数之间的随机数
const random=num=>Math.floor（Math.random（）*num）+1；
//创建具有随机值的新对象：x、y、宽度和高度（传入的数字表示最大值）
常量newRectangle=（）=>({
x：随机（250），
y：随机（300），
宽度：随机（100），
高度：随机（100）
});
导出默认类应用程序扩展组件{
//使用带有默认矩形的canvas JSON数组初始化状态
状态={
画布：[
{
x:250，
y:25，
宽度：50，
身高：100
}
]
};
//单击矩形时，它会通过展开以前的画布值并添加一组新值来创建一个新矩形
handleClick=（）=>{
this.setState（prevState=>({
画布：[…prevState.canvas，{…newRectangle（）}]
}));
};
//处理矩形拖动
handleDragStart=e=>{
e、 target.setAttrs({
阴影偏移：{
x:15，
y:15
},
scaleX:1.1，
斯卡利：1.1
});
};
//处理矩形放置
handleDragEnd=e=>{
e、 target.to({
持续时间：0.5，
放松：Konva.Easings.ElasticEaseOut，
scaleX:1，
斯卡利：1，
阴影偏移量X:5，
副职：5
});
};
渲染=（）=>(
{this.state.canvas.map（{height，width，x，y}，key）=>（//就像一个“for循环”，它映射到this.state.canvas对象上，并提取下面要使用的height，width，x，y属性
))}
);
}