如何在ReactJS中將數(shù)據(jù)從子組件傳遞給其父組件？我試圖將數(shù)據(jù)從子組件發(fā)送到其父組件，如下所示：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>
);});以下是子組件：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>
);
}});我需要的是通過父組件中的用戶獲取所選的值。我得到了一個(gè)錯(cuò)誤：Uncaught TypeError: this.props.onSelectLanguage is not a function有人能幫我找出問題嗎？子組件正在從一個(gè)json文件中創(chuàng)建一個(gè)下拉列表，我需要下拉列表來顯示JSON數(shù)組的兩個(gè)元素(比如：“AAA，English”作為首選！){
"languages":[
[
"aaa",
"english"
],
[
"aab",
"swedish"
],}
3 回答
海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
valueFieldtextFieldDropdownList
簡短回答
家長：
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/> </div>兒童：
handleLangChange = () => {
var lang = this.dropdown.value;
this.props.onSelectLanguage(lang); }詳細(xì)說明：
編輯：
React.Component
class ParentComponent extends React.Component{
state: { language: '' }
handleLanguage = (langValue) => {
this.setState({language: langValue});
}
render() {
return (
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/>
</div>
)
}}var json = require("json!../languages.json");var jsonArray = json.languages;export class SelectLanguage extends React.Component {
state = {
selectedCode: '',
selectedLanguage: jsonArray[0],
}
handleLangChange = () => {
var lang = this.dropdown.value;
this.props.onSelectLanguage(lang);
}
render() {
return (
<div >
<DropdownList ref={(ref) => this.dropdown = ref}
data={jsonArray}
valueField='lang' textField='lang'
caseSensitive={false}
minLength={3}
filter='contains'
onChange={this.handleLangChange} />
</div>
);
}}createClass
const ParentComponent = React.createClass({
getInitialState() {
return {
language: '',
};
},
handleLanguage: function(langValue) {
this.setState({language: langValue});
},
render() {
return (
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/>
</div>
);});兒童
var json = require("json!../languages.json");var jsonArray = json.languages;export const SelectLanguage = React.createClass({
getInitialState: function(){
return{
selectedCode: '',
selectedLanguage: jsonArray[0],
};
},
handleLangChange: function () {
var lang = this.refs.dropdown.value;
this.props.onSelectLanguage(lang);
},
render() {
return (
<div >
<DropdownList ref='dropdown'
data={jsonArray}
valueField='lang' textField='lang'
caseSensitive={false}
minLength={3}
filter='contains'
onChange={this.handleLangChange} />
</div>
);
}});杰森：
{ "languages":[
{
"code": "aaa",
"lang": "english"
},
{
"code": "aab",
"lang": "Swedish"
},
] }
慕萊塢森
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
將數(shù)據(jù)從子組件傳遞到父組件
getData(val){
// do not forget to bind getData in constructor
console.log(val);}render(){
return(<Child sendData={this.getData}/>);}demoMethod(){
this.props.sendData(value);
}
白衣非少年
TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
class ParentComponent extends Component{
onSubmit(data) {
let mapPoint = this.getMapPoint();
}
render(){
return (
<form onSubmit={this.onSubmit.bind(this)}>
<ChildComponent getCurrentPoint={getMapPoint => {this.getMapPoint = getMapPoint}} />
<input type="submit" value="Submit" />
</form>
)
}}class ChildComponent extends Component{
constructor(props){
super(props);
if (props.getCurrentPoint){
props.getCurrentPoint(this.getMapPoint.bind(this));
}
}
getMapPoint(){
return this.Point;
}}添加回答
舉報(bào)
0/150
提交
取消