Child-parent-Komponente, die Kommunikation in ReactJS
Ich gerne die Attribut-Eigenschaften/Requisiten/Statuswerte von untergeordneten Komponente zur übergeordneten Komponente auf ein Ereignis, Feuer onDrag
. Ich konnte nicht finden die ordnungsgemäße Dokumentation, die auf dieser.
Hier ist mein code:
/*** @jsx React.DOM */
var APP=React.createClass({
getInitialState:function()
{
return {url:'http://www.youtube.com/embed/XGSy3_Czz8k'}
},
handleDrag:function(vidurl)
{
alert(vidurl); //i need to get child component url here.
},
render:function(){
return <div>
<VideoFrame src={this.state.url} />
<hr/>
<videos handle={this.handleDrag(vidurl)} />
</div>
}
});
var VideoFrame=React.createClass({
render:function(){
return <div>
<iframe width="420" height="315" src={this.props.src}>
</iframe>
</div>
}
});
var videos=React.createClass({
getInitialState:function()
{
return {vidurl:'http://www.youtube.com/embed/XGSy3_Czz8k'}
},
render:function()
{
return <img src="http://upload.wikimedia.org/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.props.handle.bind(this.state.vidurl)}></img> //trying to send state value from here
}
});
React.renderComponent(<APP />, document.body);
Ich hoffe mein code ist klar.
- können Sie dieses problem reproduzieren in jsfiddle?
- Dieser code wäre viel klarer, es zu Lesen, es verwendet, konsistente Einrückung.
- stackoverflow.com/questions/35649635/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
In-App-Komponente dieser Linie
ist nicht korrekt, man sollte übergeben, die callback-Funktion, anstatt eine Funktion aufzurufen.
In VideoForm diese Zeile
ist nicht korrekt, dies.Requisiten.handle des übergeordneten Rückruf, man sollte einfach nur diesen Aufruf.Requisiten.Griff(dies.Zustand.videoUrl)
Korrekte Umsetzung:
Das erste argument zu bind wird das Objekt als "dieses", wenn die gebundene Methode aufgerufen wird, wird das zweite argument von bind ist das erste argument übergeben.
Stellen Sie sicher, pass-Funktionen, um auch in der ersten Klasse, die Sie anrufen handleDrag dann übergeben Sie den Rückgabewert in der videos-Komponente anstatt in handleDrag selbst.