Question

我有一个元素和一个子元素，它们都有一个事件处理程序，但是，父处理程序似乎阻塞了子处理程序。我曾尝试使用 https://reactjs.org/docs/events.html#supported-events。遗憾的是它不起作用或者我没有正确使用它。

我的一些代码在哪里：类： Matrix 和 Tile 矩阵渲染函数包含：

<element onMouseDown={this._onPressDown} onMouseUp={this._onPressUp}><Matrix/></element>

Matrix 包含 Tile 对象作为 NxN 矩阵如下：

[[<Tile/>,<Tile/>],[<Tile/>,<Tile/>]]

Tile 渲染函数包含：

<div onClick={this._onClick} onMouseEnter={this._onEnter}><Matrix/></div>

子（平铺）函数 _onClicked 未被调用。

编辑：

  buildMatrix(){
    let [tileWidth,tileHeight] = this.calculateTileSize();
    this.reBuildMatrix = !this.reBuildMatrix;
    return  (<element onMouseDown={this._onPressDown} onMouseUp={this._onPressUp} stopPropagation>
                <table className='matrix' key={this.reBuildMatrix}>{   
                            this.state.tileMatrixMap.map((rowItem,row)=>(
                                <tr>
                                    {
                                        rowItem.map((tile,col)=>(
                                        <th><Tile 
                                            width={tileWidth}
                                            height={tileHeight} 
                                            isWall={tile.isWall}
                                            isPath={tile.isPath}
                                            onClick={tile.onClick}
                                            position= {[row,col]}
                                            backgroundColor={tile.isWall?this.wallColor:(tile.isPath? this.pathColor:this.backgroundColor)}
                                        /></th>
                                        ))
                                    }
                                </tr>
                            ))}
                    </table>
            </element>);

当这条线被禁用时this.reBuildMatrix = !this.reBuildMatrix; 代码按 expexted 工作，但是如果我启用该行，则不会调用该函数

反应-将事件传递给内部孩子

0 个答案: