<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>
将数据从子组件传递到父组件
在父组件中:
getData(val){ // do not forget to bind getData in constructor console.log(val); } render(){ return(<Child sendData={this.getData}/>); }在子组件中:
demoMethod(){ this.props.sendData(value); }这应该有效。在发送回 prop 时,您将其作为对象发送,而不是将其作为值发送,或者将其用作父组件中的对象。其次,您需要格式化 json 对象以包含名称值对,并使用
的DropdownListvalueField和textField属性简答
父级:
<div className="col-sm-9"> <SelectLanguage onSelectLanguage={this.handleLanguage} /> </div>孩子:
handleLangChange = () => { var lang = this.dropdown.value; this.props.onSelectLanguage(lang); }详细:
编辑:
考虑到 React.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" }, ] }