Wie übergebe ich Daten von der untergeordneten Komponente an die übergeordnete Komponente in ReactJS?
P粉441076405
2023-08-27 13:34:07
<p>Ich versuche, Daten von einer untergeordneten Komponente wie folgt an ihre übergeordnete Komponente zu senden: </p>
<pre class="brush:php;toolbar:false;">const ParentComponent = React.createClass({
getInitialState() {
zurückkehren {
Sprache: '',
};
},
handleLanguageCode: function(langValue) {
this.setState({Sprache: langValue});
},
render() {
zurückkehren (
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/>
</div>
);
});</pre>
<p>Dies ist die Unterkomponente: </p>
<pre class="brush:php;toolbar:false;">export const SelectLanguage = React.createClass({
getInitialState: function(){
zurückkehren{
ausgewählter Code: '',
Ausgewählte Sprache: '',
};
},
handleLangChange: Funktion (e) {
var lang = this.state.selectedLanguage;
var code = this.state.selectedCode;
this.props.onSelectLanguage({selectedLanguage: lang});
this.props.onSelectLanguage({selectedCode: code});
},
render() {
var json = require("json!../sprachen.json");
var jsonArray = json.sprachen;
zurückkehren (
<div>
<DropdownList ref='dropdown'
data={jsonArray}
value={this.state.selectedLanguage}
caseSensitive={false}
minLength={3}
filter='enthält'
onChange={this.handleLangChange} />
</div>
);
}
});</pre>
<p>Was ich brauche, ist, den vom Benutzer ausgewählten Wert in der übergeordneten Komponente abzurufen. Ich erhalte diese Fehlermeldung: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: this.props.onSelectLanguage ist keine Funktion</pre>
<p>Kann mir jemand helfen, das Problem herauszufinden? </p>
<p>P.S. Die Unterkomponente erstellt ein Dropdown aus einer JSON-Datei. Ich benötige das Dropdown, um zwei Elemente eines JSON-Arrays nebeneinander anzuzeigen (z. B. „aaa,english“ wie bevorzugt!)</p>
<pre class="brush:php;toolbar:false;">{
"Sprachen":[
[
„aaa“,
"Englisch"
],
[
„aab“,
"Schwedisch"
],
}</pre>
<p><br /></p>
将数据从子组件传递到父组件
在父组件中:
在子组件中:
这应该有效。在发送回 prop 时,您将其作为对象发送,而不是将其作为值发送,或者将其用作父组件中的对象。其次,您需要格式化 json 对象以包含名称值对,并使用
的DropdownList
valueField
和textField
属性简答
父级:
孩子:
详细:
编辑:
考虑到 React.createClass 从 v16.0 开始已被弃用,最好通过扩展
React.Component
来创建 React 组件。使用此语法将数据从子组件传递到父组件将如下所示父级
孩子
使用OP在其答案中使用的
createClass
语法 父级孩子
JSON: