Получить OnClick события кнопки в ребенке

Question

У меня реагируют компонент похожих на:

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> 
     ); 
    } 
}); 

чертежной компонент Tube затем много кругов с их собственным состоянием выбранного или не были выбраны:

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 не обнаружил ничего о том, как «видеть» событие, происходящее в родительский компонент.

Еще глубже в философии того, что здесь происходит, я использую массив для механизма хранения данных, а затем передаю его в качестве реквизита для ребенка, чтобы отобразить круги. Мне нужно найти правильный путь для дочернего компонента ребенка привязываться к элементу массива, который его отобразил, или щелкнуть кнопкой мыши, чтобы иметь возможность напрямую манипулировать куском массива, который его отобразил.

Заранее благодарим за помощь.

Answer 1

Вы не можете передавать события от родителя к детям, вы можете устанавливать только свойства.

Таким образом, вы можете либо передать встречное/позицию компонента на onClick события, или же просто хороший старый JS events

Answer 2

Ваш лучший выбор - это, вероятно, передача значения, которое вы хотите вычесть из положения Y в качестве реквизита в <Drawing />, а затем снова на <DrawingTube />.