我正在尝试将数据从子组件发送到其父组件,如下所示:
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
谁能帮我发现问题?
PS子组件正在从json文件创建一个下拉列表,并且我需要该下拉列表来显示json数组的两个元素彼此相邻(例如:“ aaa,english”是首选!)
{ "languages":[ [ "aaa", "english" ], [ "aab", "swedish" ], }
这应该工作。在发送回道具时,您将其作为对象发送,而不是作为值发送,或者将其用作父组件中的对象。其次,您需要格式化json对象,使其包含名称值对以及使用valueField和textField属性DropdownList
valueField
textField
DropdownList
简短答案
上级:
<div className="col-sm-9"> <SelectLanguage onSelectLanguage={this.handleLanguage} /> </div>
子组:
handleLangChange = () => { var lang = this.dropdown.value; this.props.onSelectLanguage(lang); }
详细:
编辑:
考虑到从v16.0起不推荐使用React.createClass,最好继续扩展来创建React组件React.Component。使用这种语法将数据从子组件传递到父组件看起来像
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> ); } }
使用createClassOP在其答案中使用的语法 父级
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" }, ] }