reactjs - React Konva：onClick（）未在功能组件中触发

问题描述

我正在尝试onClick在功能组件中的图像上创建一个事件，该功能组件是我拥有 Konva Stage 的组件的孙子。然而，似乎什么都没有发生。

我什至尝试将onClickadiv放在带有舞台的组件中。依然没有。我可以处理点击的唯一方法是onMouseDown在我的舞台上放一个。但这在这种情况下是不切实际的，因为我需要单击来触发孙组件的更改。

为什么什么都不会触发？

这是代码。我已经删除了不相关的代码和功能。

在PanelRect.js组件中查找onClick()应该触发该select()功能的组件。

首先，这是带有 Konva 阶段的祖父母。

地图.js

import React, { useState } from 'react';
import Konva from 'konva';
import { Stage, Layer, Image } from 'react-konva';
import { keyHandler, KEYPRESS } from 'react-key-handler';
import MapRoomRect from './MapRoomRect';
import { PanelRect } from './PanelRect';

const Map = () => {
    return (
        <section className='map'>
            <h1>Projekt X</h1>
            <div className='map_box'>

                <div className='map_box_container' >
                    <div className='map_box_container_stage'>
                        <Stage name='Stage' width={stageWidth} height={stageHeight} onMouseDown={handleStageMouseDown} onKeyPress={handleKeyDown}>
                            <Layer
                                onMouseEnter={handleLayerMouseEnter}
                                onMouseLeave={handleLayerMouseLeave}
                            >

                            <MapRoomRect
                              name='MapRoomRect'
                              draggable
                              visible={false}
                              />

                                <Image name='IconImage' draggable visible={false}/>


                            </Layer>
                        </Stage>
                    </div>
                </div>
            </div>
        </section>
    );
}

export default Map;

这是父组件

MapRoomRect.js

import React from 'react';
import { Rect, Group, Image } from 'react-konva';
import useImage from 'use-image';
import { PanelRect } from './PanelRect';

const MapRoomRect = (props) => {

    return (
        <Group
            name='RoomGroup'
            roomType='RoomType'
            id='0002'
            onDragEnd={() => { }}
            position={{ x: 200, y: 200 }}
            draggable
            visible={false}
            size={{ width: roomSize, height: roomSize }}
        >
            <Rect
                name='RoomGroupBackground'
                size={{ width: roomSize, height: roomSize }}
                opacity={0.3}
                fill='red'
            />
            <PanelRect
                name='PanelGroup'
                onDragEnd={() => { }}
                size={{ width: iconSize, height: iconSize2 }}
                x={0}
                y={0} />

        </Group>
    )
}

export default MapRoomRect;

子/孙子组件：

PanelRect.js

import React, { useState } from 'react';
import { Rect, Group, Image } from 'react-konva';
import useImage from 'use-image';

// Images
import backgroundImage from '../../images/tp6icon.png';
import iconTestImage from '../../images/lo1.png';
import iconTestImage2 from '../../images/lo2.png';
import iconTestImage3 from '../../images/lo3.png';
import iconTestImage4 from '../../images/lo4.png';
import iconTestImage5 from '../../images/lo5.png';

import MapContext from './MapContext';


const PanelRect = (props) => {

      // Hooks
    const [mapState, setMapState] = useState(mapContext);


    let los = [0, 0, 0, 3, 4];
    // Hooks
    const [testImage] = useImage(iconTestImage);
    const [testImage2] = useImage(iconTestImage2);
    const [testImage3] = useImage(iconTestImage3);
    const [testImage4] = useImage(iconTestImage4);
    const [testImage5] = useImage(iconTestImage5);

    var images = [testImage,testImage2,testImage3,testImage4,testImage5];

    // Constants that does not change
    const roomSize = 5;
    const roomSize2 = 7;
    const iconSize = 2;
    const iconSize2 = 2;


    const select = (e) => {
          console.log('Hi! "e" is now: ' + e + ' hmmm');
    }

    return (
        <Group
            name='PanelGroup'
            roomType='PanelType'
            id='0003'
            onDragEnd={() => { }}
            position={{ x: 0, y: 0 }}
            draggable
            size={{ width: roomSize, height: roomSize2 }}
        >
        <Rect
            name='PanelGroupBackground'
            size={{ width: roomSize, height: roomSize2 }}
            opacity={0.9}
            fill='blue'
        />
            <Image name='IconImage' lid='LO1' lo='0' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[0]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={0} y={0} />
            <Image name='IconImage' lid='LO2' lo='1' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[1]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={2} y={0} />
            <Image name='IconImage' lid='LO3' lo='2' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[2]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={0} y={2} />
            <Image name='IconImage' lid='LO4' lo='3' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[3]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={2} y={2} />
            <Image name='IconImage' lid='LO5' lo='4' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[4]]} size={{ width: iconSize, height: iconSize2 }} draggable={false} x={0} y={4} />


        </Group>
    )
}

export { PanelRect }

我没有收到任何错误消息或警告。只是当我单击时没有任何反应。不管我把onClick().

编辑 2019 年 8 月 7 日

我创建了一个显示问题的沙箱。

点击“创建红色方块”
点击红色方块。
点击“编辑红色方块”
点击里面的蓝色方块
点击“编辑蓝色方块”
单击蓝色方块中带有数字的瓷砖。

我onClick()想在这些上触发，并获得对合成事件对象的访问权限，以便我可以访问目标。

https://codesandbox.io/s/quirky-ramanujan-p53b9?fontsize=14

标签： reactjsonclickarrow-functionskonvajs

reactjs - React Konva：onClick（）未在功能组件中触发

问题描述

解决方案

推荐阅读