ReactJSで子コンポーネントから親コンポーネントにデータを渡すにはどうすればよいですか?
P粉441076405
P粉441076405 2023-08-27 13:34:07
0
2
439
<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>
P粉441076405
P粉441076405

全員に返信(2)
P粉652495194

子コンポーネントから親コンポーネントにデータを渡す

親コンポーネント内:

リーリー

子コンポーネント内:

リーリー
いいねを押す +0
P粉946437474

これはうまくいくはずです。プロパティを送り返すときは、値として送信したり、親コンポーネントのオブジェクトとして使用したりするのではなく、オブジェクトとして送信します。次に、名前と値のペアを含むように json オブジェクトをフォーマットし、DropdownList

valueField プロパティと textField プロパティを使用する必要があります。 ######短い答え###### ######父親:### ### リーリー ######子供:###### リーリー

詳細:

######編集:###### React.createClass が v16.0 以降非推奨になったことを考慮すると、React.Component

を拡張して React コンポーネントを作成することが最善です。この構文を使用して子コンポーネントから親コンポーネントにデータを渡すと、次のようになります

###父親### リーリー ###子供### リーリー OPが回答で使用した

createClass
構文を使用します ###父親###### リーリー ######子供###### リーリー

JSON:

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート