我试图从一个子组件发送数据到它的父母如下:
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>
);
}
});
我需要的是在父组件中获得用户所选择的值。我得到这个错误:
Uncaught TypeError: this.props.onSelectLanguage is not a function
有人能帮我找到问题吗?
附注:子组件正在从json文件中创建下拉列表,我需要下拉列表来显示json数组的两个元素相邻(如:“aaa,英语”作为首选!)
{
"languages":[
[
"aaa",
"english"
],
[
"aab",
"swedish"
],
}
这应该有用。当发送回道具时,您将其作为对象发送,而不是将其作为值发送,或者将其作为父组件中的对象使用。其次,你需要格式化json对象,以包含名称值对,并使用DropdownList的valueField和textField属性
简短的回答
家长:
<div className="col-sm-9">
<SelectLanguage onSelectLanguage={this.handleLanguage} />
</div>
孩子:
handleLangChange = () => {
var lang = this.dropdown.value;
this.props.onSelectLanguage(lang);
}
详细:
编辑:
考虑到反应。createClass从v16.0起已弃用,最好通过扩展React.Component来创建一个React组件。使用此语法将数据从子组件传递到父组件将如下所示
父
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>
);
}
}
使用OP在回答中使用的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>
);
}
});
JSON:
{
"languages":[
{
"code": "aaa",
"lang": "english"
},
{
"code": "aab",
"lang": "Swedish"
},
]
}
在React钩子中父组件和子组件之间传递数据
将函数传递给子函数,
并通过调用父函数来等待子函数返回值
父母(. . / app.js)
import MyCOMP from "../component/MyCOMP"; //import child component
export default function MyMainPage() {
return(
<>
<MyCOMP
//pass function to child and wait child passback the changed value
// 1.Click child component passing function to child
ParentFunction={(x)=>{
console.log('Child Pass Back Value',x)
// 3. Parent received data
// after you get the value change you can ultilize another function, useEffect or useState
}}/>
</>
)
}
孩子(. . /组件/ MyCOMP.js)
export default function MyCOMP({ParentFunction}){
return(
<>
<button onClick={()=>{
// 2. Child passing back value to parent
ParentFunction("Child reply ANSWER is ","fm 99.8");}}>Click Me</button>
</>
)
}
结果
点击按钮后,父类显示“fm99.8”的sting值(该
孩子的价值)
请在下面评论,如果这对你有帮助,或者你有其他的想法