Get onClick Schaltfläche Ereignis in den Kindern

Question

Ich habe eine reagieren Komponente ähnlich wie:

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

Und sein Kind Komponente nimmt das Array im Zustand und bildet sie in einem svg zu mehreren Kreiskomponenten genannt Röhren:

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

Zugrohrs Komponente sind dann viele Kreise mit ihrem eigenen Zustand ausgewählt oder nicht:

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

Meine Frage ist dann, wie bekomme ich das Klickereignis "Hoch" in "Eltern Eltern" (TabComponent), um die y-Position des Kreises im Kind des Kindes zu verringern? Oder allgemeiner: Wie gebe ich ein OnClick-Ereignis an die Kinder weiter, damit sie auf das Ereignis reagieren können?

Ich habe eine Menge Informationen darüber gefunden, wie Ereignisse von Kindern auf dem Elternobjekt "gesehen" werden, indem ein Rückruf an die Kinderkomponenten weitergeleitet wird. Aber nichts von meiner Google-Suche ergab etwas darüber, wie man ein Ereignis "sieht" eine Elternkomponente.

Noch tiefer in der Philosophie von dem, was hier vor sich geht, verwende ich ein Array für einen Datenspeichermechanismus und übertrage es dann als Requisiten an das Kind, um die Kreise zu rendern. Ich muss den richtigen Weg finden, damit die Child-Komponente des Kindes mit dem Array-Element verbunden wird, das sie gerendert hat, oder dass der Button-Klick das Array-Stück, das es gerendert hat, direkt manipulieren kann.

Vielen Dank im Voraus für jede Hilfe zu diesem Thema.

Answer 1

Sie können keine Ereignisse von übergeordneten an untergeordnete Elemente übergeben, Sie können nur Eigenschaften festlegen.

So können Sie entweder einen Zähler/Position in die Komponente weitergeben onClick Ereignis oder auch nur gute alte JS events

Answer 2

Die beste Wette wäre wahrscheinlich, den Wert, den Sie von der Y-Position als Requisiten abziehen möchten, an <Drawing /> und dann wieder an die <DrawingTube /> zu übergeben.