如何在ReactJS中将数据从子组件传递到其父组件？

我正在尝试将数据从子组件发送到其父组件，如下所示：

const ParentComponent=React.createClass({
getInitialState（）{
返回{
语言：''，
};
},
handleLanguageCode:函数（langValue）{
this.setState（{language:langValue}）；
},
render（）{
返回(
&lt；div className=“col-sm-9”&gt；
&lt；SelectLanguage on SelectLanguage={this.handleLanguage}/&gt；
&lt；/div&gt；
);
});

下面是子组件：

导出const SelectLanguage=React.createClass({
getInitialState:函数（）{
返回{
所选代码：“”，
所选语言：“”，
};
},
handleLangChange:功能（e）{
var lang=this.state.selectedLanguage；
var代码=this.state.selectedCode；
this.props.onSelectLanguage（{selectedLanguage:lang}）；
this.props.onSelectLanguage（{selectedCode:code}）；
},
render（）{
var json=require（“json../languages.json”）；
var jsonArray=json.languages；
返回(
&lt；div&gt；
&lt；DropdownList ref=’dropdown’
数据={jsonArray}
值={this.state.selectedLanguage}
区分大小写={false}
minLength={3}
过滤器class=’contains’
onChange={this.handleLangChange}/&gt；
&lt；/div&gt；
);
}
});

我需要的是在父组件中按用户获取所选值。我收到以下错误：

未捕获类型错误：this.props.onSelectLanguage不是函数

有人能帮我找到问题吗

另外，子组件正在从一个json文件创建一个下拉列表，我需要这个下拉列表来显示json数组的两个元素彼此相邻（例如：“aaa，english”作为首选！）

{
“语文”：[
[  
“aaa”，
“英语”
],
[  
“aab”，
“瑞典语”
],
}

这应该会起作用。在发回道具时，您将道具作为对象发送，而不是作为值发送，或者将其作为父组件中的对象使用。其次，您需要格式化json对象以包含名称-值对，并使用valueField和textField属性DropdownList

简短回答

家长：

&lt；div className=“col-sm-9”&gt；
&lt；SelectLanguage on SelectLanguage={this.handleLanguage}/&gt；
&lt；/div&gt；

子项：

handleLangChange=（）=&gt{
var lang=this.dropdown.value；
this.props.onSelectLanguage（lang）；
}

详细说明：

编辑：

考虑到React.createClass从v16.0开始就不推荐使用，最好继续通过扩展React.Component来创建React组件。使用此语法将数据从子组件传递到父组件

母公司

类ParentComponent扩展React.Component{
状态={语言：’}
手语=（langValue）=&gt{
this.setState（{language:langValue}）；
}
render（）{
返回(
&lt；div className=“col-sm-9”&gt；
&lt；SelectLanguage on SelectLanguage={this.handleLanguage}/&gt；
&lt；/div&gt；
)
}
}

孩子

var json=require（“json../languages.json”）；
var jsonArray=json.languages；
导出类SelectLanguage扩展React.Component{
状态={
所选代码：“”，
所选语言：jsonArray[0]，
}
handleLangChange=（）=&gt{
var lang=this.dropdown.value；
this.props.onSelectLanguage（lang）；
}
render（）{
返回(
&lt；div&gt；
&lt；DropdownList ref={（ref）=&gt；this.dropdown=ref}
数据={jsonArray}
valueField='lang'文本字段='lang'
区分大小写={false}
minLength={3}
过滤器class='contains'
onChange={this.handleLangChange}/&gt；
&lt；/div&gt；
);
}
}

使用OP在回答中使用的createClass语法
家长

const ParentComponent=React.createClass({
getInitialState（）{
返回{
语言：''，
};
},
handleLanguage:函数（langValue）{
this.setState（{language:langValue}）；
},
render（）{
返回(
&lt；div className=“col-sm-9”&gt；
&lt；SelectLanguage on SelectLanguage={this.handleLanguage}/&gt；
&lt；/div&gt；
);
});

儿童

var json=require（“json../languages.json”）；
var jsonArray=json.languages；
export const SelectLanguage=React.createClass({
getInitialState:函数（）{
返回{
所选代码：“”，
所选语言：jsonArray[0]，
};
},
handleLangChange:函数（）{
var lang=this.refs.dropdown.value；
this.props.onSelectLanguage（lang）；
},
render（）{
返回(
&lt；div&gt；
&lt；DropdownList ref='dropdown'
数据={jsonArray}
valueField='lang'文本字段='lang'
区分大小写={false}
minLength={3}
过滤器class='contains'
onChange={this.handleLangChange}/&gt；
&lt；/div&gt；
);
}
});

JSON:

{
“语文”：[
{ 
“代码”：“aaa”，
“郎”：“英语”
}, 
{ 
“代码”：“aab”，
“朗”：“瑞典语”
}, 
] 
}

相关文章：

发表评论 取消回复

发表评论取消回复