python - 使用 React-konva 时 React 中出现错误“e.GetBoundingClientRect() 不是函数”

Question

我是 Reactjs 的新手，我正在尝试创建一个函数，在鼠标单击的位置创建一个圆圈。问题是每次我点击时，都会显示错误“e.getClickCoords 不是函数”。

此外，尽管我传递了参数，但函数 addCircle 中存在错误“形状未定义”。我不知道如何解决它:(

这是代码：

import React, { useState } from 'react';

import styled from "styled-components";
import './mysass.scss';

import { Stage, Layer, Circle, Line, Text } from "react-konva";
import { shapes } from 'konva/lib/Shape';
import ReactCursorPosition from 'react-cursor-position';

function initiate_shape() {
    const initial_shape = [];
    alert("Hello there");

    for (var i = 0; i < 2; i++) {
        initial_shape.push({
            id: i,
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight
        });
    }
    return initial_shape;
}


const getClickCoords = (event) => {
    var e = event.target;
    
    var dim = e.getBoundingClientRect();
    var cx = event.clientX - dim.left;
    var cy = event.clientY - dim.top;

    alert(cx + cy);
    return [cx, cy];
    
   /*
    var cX = event.clientX;
    var sX = event.screenX;
    var cY = event.clientY;
    var sY = event.screenY;
    var coords1 = "client - X: " + cX + ", Y coords: " + cY;
    var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
    alert(coords1);
    alert(coords2);
    */
    //return [cX, cY];
}

function addCircle(event,shapes, shape_id) {
    let [sX, sY] = getClickCoords(event);
    alert("x: " + sX + " y: " + sY);

    shapes.push({id: shape_id, x: sX, y: sY});
    shape_id += 1
    
}
const FunctionApp = (event) => {
    const shape_id = 2;

    const initial_shape = initiate_shape();
    const [shapes, setShapes] = React.useState(initial_shape);
    alert(shapes);
    const [connectors, setConnectors] = React.useState([]);

    const [fromShapeId, setFromShapeId] = React.useState(null);

    //let cx = coordinates[0];
    //let cy = coordinates[1];

    return (

        <Stage width={window.innerWidth} height={window.innerHeight} onclick={addCircle}>
            <Layer>
                
                {connectors.map(con => {
                const from = shapes.find(s => s.id === con.from);
                const to = shapes.find(s => s.id === con.to);

                return (
                    <Line
                    key={con.id}
                    points={[from.x, from.y, to.x, to.y]}
                    stroke="black"
                    />
                );
                })}
                {shapes.map(shape => (
                <Circle
                    x={shape.x}
                    y={shape.y}
                    key={shape.id}
                    fill={fromShapeId === shape.id ? "red" : "green"}
                    radius={20}
                    shadowBlur={10}
                    onClick={() => {
                    if (fromShapeId) {
                        const newConnector = {
                        from: fromShapeId,
                        to: shape.id,
                        id: connectors.length
                        };
                        setConnectors(connectors.concat([newConnector]));
                        setFromShapeId(null);
                        //connectors.concat([newConnector]);
                        //fromShapeId = null;
                    } else {
                        setFromShapeId(shape.id);
                        //fromShapeId = shape.id;
                    }
                    }}
                />
                ))}
                <Text text="Click on on circle then on another to connect them" />
            </Layer>
        </Stage>

        
    )

}

export default FunctionApp;

提前谢谢你

标签： pythonreactjsreact-konva

Answer 1

可能你应该这样onclick做onClick。你也应该通过shapes, shape_id。

<Stage width={window.innerWidth} height={window.innerHeight} onClick={(e)=>addCircle(e, 'shapes details here', 'shape id here')}>