Wie Zugriff auf diese Werte in Reagieren?

Question

Ich habe diese Container-Komponente (Eltern) und Kind-Komponente. Ich baue meine App mit Container-Komponenten-Muster (ich versuche :)).

Also übernimmt Eltern alle Statusbehandlung, während Kind nur Requisiten akzeptiert und basierend auf ihnen Ausgaben anzeigt.
Aber ich kam zu diesem kleinen Problem: Kind zeigt 2 Tasten (+ und -) und zwei Radio-Tasten (rufen Sie 1 und 2). Basierend auf dem Radio, das überprüft wird, muss ich den Zustand bei den Eltern aktualisieren.

Ich dachte daran, es durch ref, aber ich werde mit guten Praktiken bleiben und vermeiden, es zu verwenden.
Andere Idee, über die ich nachgedacht habe, war, die Funktion zu übergeben, die beim Drücken der Taste (binded to parent) aufgerufen wird, aber ich sehe keine Möglichkeit, diese Funktion mit dem in der untergeordneten Komponente übergebenen Argument aufzurufen.

Kind:

<label><input type='radio' name='time'/> Work time</label> 
<label><input type='radio' name='time' /> Break time</label> 
<button onClick={this.props.valueControl} className='add'>+</button> 
<button onClick={this.props.valueControl} className='sub'>-</button> 

Vielen Dank für jede Hilfe!

Answer 1

Die Art und Weise mit den Eltern von Ihrem Kind Komponente kommunizieren würde, ist über Rückrufe in mit Eigenschaften übergeben:

in Parent.js:

... 
    someEventOccured(event) { 
    this.modifyState(); 
    } 

    render() { 
    ... 
    <child-component onSomeEvent={this.someEventOccured.bind(this)}> 
    ... 
    } 
} 

in Child.js:

... 
    render() { 
    ... 
    <button onClick={this.props.onSomeEvent}></button> 
    ... 
    } 
} 

Im wirklichen Leben würden Sie wahrscheinlich eine Methode von Child an das onClick anhängen, das das Ereignis verarbeitet und nur die Daten zurück an das Parent anstelle des gesamten Ereignisses sendet.