获取孩子的onClick按钮事件

我有一个反应成分类似于：获取孩子的onClick按钮事件

let TabComponent = React.createClass({ 
    getInitialState : function() { 
     return { 
      tubesArray: [ ], 
      rows: 10, 
      tubesPerrow: 10, 
     }; 

    }, 

    render: function() { 

     return (
      <div className={styles.drawingWrapper}> 
       <button className={styles.tabButton}> 
        Up 
       </button> 
       <Drawing ref="drawing" tubesArray = {this.state.tubesArray} deleteTube={this.deleteTube}/> 
      </div> 
     ); 
    } 
});

及其子组件占用状态的阵列和一个SVG它映射到几个圈组件称为管：

let Drawing = React.createClass({ 

    renderTubes: function() { 
     let deleteTube = this.props.deleteTube; 
     return this.props.tubesArray.map((row) => { 
      return row.map((tube) => { 
       return <DrawingTube key={tube.id} row={row} tube={tube} delete={deleteTube}/>; 
      }); 
     }); 
    }, 

    render: function() { 
     return (
      <div className={styles.drawing} style={{"border":"1px solid black"}}> 
       <svg onMouseUp={this.handleMouseUp} onMouseMove={this.handleMouseMove} onMouseDown={this.handleMouseDown} 
        ref="svg" className={styles.svg} viewBox="0 0 480 300" preserveAspectRatio="xMidYMid meet"> 
        {this.renderTubes()} 
       </svg> 
      </div> 
     ); 
    } 
});

拉伸管组件随后有许多圈，与自己的选择或不选择的状态：

let DrawingTube = React.createClass({ 

    getInitialState : function() { 
     return { 
      filled: false 
     }; 
    }, 

    fillSVG: function(event){ 
     if(this.state.filled){ 
      this.setState({filled: false}); 
     } 
     else{ 
      this.setState({filled: true}); 
     } 
    }, 

    render: function() { 
     return (
      <circle cx={this.props.tube.xPos} 
        cy={this.props.tube.yPos} 
        r={this.props.tube.diameter/2} 
        stroke="black" 
        strokeWidth="1" 
        fill={this.state.filled ? 'black' : 'purple'} 
        onClick={this.fillSVG} 
        onMouseDown={this.handleMouseDown} 
      /> 
     ); 
    } 
});

那么我的问题是，如何获得“父母的父母”（TabComponent）中的向上按钮单击事件来减少孩子孩子的圆的y位置？或者更一般地说，我如何将onClick事件传递给儿童，以便他们能够对事件做出反应？

我发现了很多关于如何通过将回调传递给子组件来“看到”父项子项的事件的信息，但是我的Google搜索没有发现任何有关如何“查看”发生在一个父组件。

在这里发生的事情的哲学中，我使用数组作为数据存储机制，然后将其作为道具传递给孩子以呈现圆圈。我需要找到正确的方法来将子组件的子组件绑定到呈现它的数组元素，或者单击按钮以便能够直接操作呈现它的数组件。

在此先感谢您的帮助。

来源

2017-01-08 Brian Stallter