ReactJSで子コンポーネントから親コンポーネントにデータを渡すにはどうすればよいですか?
P粉441076405
2023-08-27 13:34:07
<p>次のように子コンポーネントから親コンポーネントにデータを送信しようとしています。</p>
<pre class="brush:php;toolbar:false;">const ParentComponent = React.createClass({
getInitialState() {
戻る {
言語： ''、
};
}、
handleLanguageCode: function(langValue) {
this.setState({言語: langValue});
}、
与える（） {
戻る （
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/>
</div>
);
});</pre>
<p>これはサブコンポーネントです:</p>
<pre class="brush:php;toolbar:false;">export const SelectLanguage = React.createClass({
getInitialState: function(){
戻る{
選択されたコード: '',
選択された言語: '',
};
}、
handleLangChange: 関数 (e) {
var lang = this.state.selectedLanguage;
var code = this.state.selectedCode;
this.props.onSelectLanguage({selectedLanguage: lang});
this.props.onSelectLanguage({selectedCode: コード});
}、
与える（） {
var json = require("json!../langages.json");
var jsonArray = json.言語;
戻る （
<div>
<ドロップダウンリスト ref='ドロップダウン'
データ={jsonArray}
値={this.state.selectedLanguage}
caseSensitive={false}
minLength={3}
フィルター='含む'
onChange={this.handleLangChange} />
</div>
);
}
});</pre>
<p>必要なのは、親コンポーネントでユーザーが選択した値を取得することです。次のエラーが発生します: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: this.props.onSelectLanguage は関数ではありません</pre>
<p>誰か問題の解決を手伝ってくれませんか? </p>
<p>追記: サブコンポーネントは json ファイルからドロップダウンを作成しています。json 配列の 2 つの要素を並べて表示するにはドロップダウンが必要です (例: "aaa,english" が望ましいです!)</p>
<pre class="brush:php;toolbar:false;">{
「言語」:[
[
「ああ」、
"英語"
]、
[
「ああ」、
"スウェーデンの"
]、
}</pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
子コンポーネントから親コンポーネントにデータを渡す
親コンポーネント内:
リーリー子コンポーネント内:
リーリーこれはうまくいくはずです。プロパティを送り返すときは、値として送信したり、親コンポーネントのオブジェクトとして使用したりするのではなく、オブジェクトとして送信します。次に、名前と値のペアを含むように json オブジェクトをフォーマットし、
のDropdownListvalueFieldプロパティとtextFieldプロパティを使用する必要があります。 ＃＃＃＃＃＃短い答え＃＃＃＃＃＃ ＃＃＃＃＃＃父親：＃＃＃ ＃＃＃ リーリー ＃＃＃＃＃＃子供：＃＃＃＃＃＃ リーリー詳細:
＃＃＃＃＃＃編集：＃＃＃＃＃＃ React.createClass が v16.0 以降非推奨になったことを考慮すると、React.Component
を拡張して React コンポーネントを作成することが最善です。この構文を使用して子コンポーネントから親コンポーネントにデータを渡すと、次のようになります＃＃＃父親＃＃＃ リーリー ＃＃＃子供＃＃＃ リーリー OPが回答で使用した
createClass構文を使用します ＃＃＃父親＃＃＃＃＃＃ リーリー ＃＃＃＃＃＃子供＃＃＃＃＃＃ リーリー
JSON：
リーリー