ReactJS中如何將資料從子元件傳遞到父元件?
P粉441076405
2023-08-27 13:34:07
<p>我正在嘗試將資料從子元件傳送到其父元件,如下所示:</p>
<pre class="brush:php;toolbar:false;">const ParentComponent = React.createClass({
getInitialState() {
return {
language: '',
};
},
handleLanguageCode: function(langValue) {
this.setState({language: langValue});
},
render() {
return (
<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(){
return{
selectedCode: '',
selectedLanguage: '',
};
},
handleLangChange: function (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!../languages.json");
var jsonArray = json.languages;
return (
<div >
<DropdownList ref='dropdown'
data={jsonArray}
value={this.state.selectedLanguage}
caseSensitive={false}
minLength={3}
filter='contains'
onChange={this.handleLangChange} />
</div>
);
}
});</pre>
<p>我需要的是在父元件中取得使用者選擇的值。我收到此錯誤:</p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: this.props.onSelectLanguage is not a function</pre>
<p>誰能幫我找出問題所在嗎? </p>
<p>附註子元件正在從 json 檔案建立一個下拉列表,我需要下拉列表來顯示彼此相鄰的 json 數組的兩個元素(例如:「aaa,english」作為首選!)</p>
<pre class="brush:php;toolbar:false;">{
"languages":[
[
"aaa",
"english"
],
[
"aab",
"swedish"
],
}</pre>
<p><br /></p>
將資料從子元件傳遞到父元件
在父元件中:
在子元件中:
這應該有效。在發送回 prop 時,您將其作為物件發送,而不是將其作為值發送,或將其用作父組件中的物件。其次,您需要格式化 json 物件以包含名稱值對,並使用
的DropdownList
valueField
和textField
屬性簡答
#父級:
#孩子:
詳細:
編輯:
考慮到 React.createClass 從 v16.0 開始已被棄用,最好透過擴充
React.Component
來建立 React 元件。使用此語法將資料從子元件傳遞到父元件將如下所示父級
孩子
使用OP在其答案中使用的
createClass
語法 父級孩子
JSON:
#