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>
子コンポーネントから親コンポーネントにデータを渡す
親コンポーネント内:
リーリー子コンポーネント内:
リーリーこれはうまくいくはずです。プロパティを送り返すときは、値として送信したり、親コンポーネントのオブジェクトとして使用したりするのではなく、オブジェクトとして送信します。次に、名前と値のペアを含むように json オブジェクトをフォーマットし、
のDropdownList
valueField
プロパティとtextField
プロパティを使用する必要があります。 ######短い答え###### ######父親:### ### リーリー ######子供:###### リーリー詳細:
######編集:###### React.createClass が v16.0 以降非推奨になったことを考慮すると、React.Component
を拡張して React コンポーネントを作成することが最善です。この構文を使用して子コンポーネントから親コンポーネントにデータを渡すと、次のようになります###父親### リーリー ###子供### リーリー OPが回答で使用した
createClass構文を使用します ###父親###### リーリー ######子供###### リーリー
JSON:
リーリー