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

我试图从一个子组件发送数据到它的父母如下：

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 

任何人都可以帮我find问题吗？

PS子组件正在创build一个json文件的下拉菜单，我需要下拉列表来显示两个json数组相邻的元素（比如：“aaa，english”作为第一select！）

 { "languages":[ [ "aaa", "english" ], [ "aab", "swedish" ], } 

Answer 1

这应该工作。 在发送道具的时候，你将这个道具作为一个对象发送，而不是把它作为一个值发送，或者把它作为父组件中的一个对象。 其次，你需要格式化你的json对象来包含名称值对，并使用DropdownList valueField和textField属性

亲

 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.createClass从v16.0起不推荐使用，最好继续，通过扩展React.Component创build一个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> ); } } 

Answer 2

将数据从子组件传递给父组件

在父组件中：

 getData(val){ // do not forget to bind getData in constructor console.log(val); } render(){ return(<Child sendData={this.getData}/>); } 

在子组件中：

 demoMethod(){ this.props.sendData(value); } 

Answer 3

当我需要的时候，我发现了如何从父母的子元素中获取数据的方法。

 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; } } 

这个例子展示了如何将函数从子组件传递给父项，并使用该函数从子项中获取数据。