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

Question

我正在尝试将数据从子组件发送到其父组件，如下所示：

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

原文由 Birish 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

---

详细的：

编辑：

考虑到 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>
        );
    }
}

---

使用 createClass OP 在他的回答 Parent 中使用的语法

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

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Manisha Tan 发布，翻译遵循 CC BY-SA 3.0 许可协议