Heim >Web-Frontend >js-Tutorial >Wie übergebe ich einen Wert von der untergeordneten Reaktionskomponente an die übergeordnete Komponente?
Wie übergebe ich einen Wert von der untergeordneten Reaktionskomponente an die übergeordnete Komponente?
- 青灯夜游Original
- 2020-11-24 14:44:5513853Durchsuche
Die Methode für die React-Unterkomponente, um einen Wert an die übergeordnete Komponente zu übergeben: Legen Sie den Anfangswert des Zustands und die Funktion zur Verarbeitung des Zustands in der übergeordneten Komponente fest und übergeben Sie den Funktionsnamen in Form eines Props-Attributs an die Unterkomponente Wert, und die Unterkomponente ruft die Funktion der übergeordneten Komponente auf und bewirkt dann, dass Zustandsänderungen die Änderungen in der untergeordneten Komponente in der übergeordneten Komponente anzeigen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, React16-Version. Diese Methode ist für alle Computermarken geeignet.
Verwandte Empfehlungen: „React Video Tutorial“
Die untergeordnete Komponente muss ihren eigenen Status steuern und dann der übergeordneten Komponente ihren eigenen Status mitteilen, die Funktion aufrufen, die zum Steuern des Status in der übergeordneten Komponente über Requisiten verwendet wird, und Zeigt die Zustandsänderungen der untergeordneten Komponente in der übergeordneten Komponente an.
/***实现在输入框输入邮箱时，在p中即时显示输入内容***/
<body>
<p id="test"></p>
</body>
//子组件
var Child = React.createClass({
render: function(){
return (
<p>
邮箱：<input onChange={this.props.handleEmail}/>
</p>
)
}
});
//父组件
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(event){
this.setState({email: event.target.value});
},
render: function(){
return (
<p>
<p>邮箱：{this.state.email}</p>
<Child name="email" handleEmail={this.handleEmail.bind(this)}/>
</p>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);Prinzip:
verlässt sich auf Requisiten, um Ereignisreferenzen zu übergeben, und implementiert sie durch Rückrufe. Diese Implementierung ist nicht besonders gut, aber es ist eine einfache Implementierung ohne Tools.
Analyse:
In React wird die Komponente nur aktualisiert, wenn sich der Status ändert. Legen Sie den Anfangswert von state und die Funktion fest, um den Status in der übergeordneten Komponente zu verarbeiten, und übergeben Sie den Funktionsnamen in Form eines props-Attributwerts an die untergeordnete Komponente. Die untergeordnete Komponente ruft die Funktion der übergeordneten Komponente auf und verursacht dadurch Statusänderungen Um das Ziel zu erreichen, den Status in der übergeordneten Komponente zu ändern, zeigt die Komponente die von der Unterkomponente vorgenommenen Änderungen an.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideokurse! !
Das obige ist der detaillierte Inhalt vonWie übergebe ich einen Wert von der untergeordneten Reaktionskomponente an die übergeordnete Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!