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

Question

如何在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有人能帮我找出问题吗？子组件正在从一个json文件中创建一个下拉列表，我需要下拉列表来显示JSON数组的两个元素(比如：“AAA，English”作为首选！){      "languages":[         [            "aaa",          "english"       ],       [            "aab",          "swedish"       ],}

Answer 1

这应该管用。在将支柱发送回时，您是将其作为对象发送，而不是将其作为值发送，或者将其作为父组件中的对象使用。其次，您需要格式化json对象以包含名称值对，并使用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，最好继续通过扩展创建一个Reaction组件。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在他的回答中使用的语法父母

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" 
    }, 
  ] }

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

此示例演示如何将函数从子组件传递给父组件，并使用此函数从子组件获取数据。