Bagaimana untuk menghantar data dari komponen anak ke komponen induk dalam ReactJS?

Question

Saya cuba menghantar data daripada komponen anak kepada komponen induknya seperti ini:

const ParentComponent = React.createClass({
    getInitialState() {
        kembali {
            bahasa: '',
        };
    },
    handleLanguageCode: function(langValue) {
        this.setState({bahasa: langValue});
    },

    render() {
         kembali (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/>
                </div>
        );
});

Ini ialah subkomponen:

export const SelectLanguage = React.createClass({
    getInitialState: function(){
        kembali{
            Kod terpilih: '',
            Bahasa yang dipilih: '',
        };
    },

    handleLangChange: fungsi (e) {
        var lang = this.state.selectedLanguage;
        var code = this.state.selectedCode;
        this.props.onSelectLanguage({selectedLanguage: lang});
        this.props.onSelectLanguage({selectedCode: code});
    },

    render() {
        var json = memerlukan("json!../languages.json");
        var jsonArray = json.languages;
        kembali (
            <div>
                <DropdownList ref='dropdown'
                    data={jsonArray}
                    value={this.state.selectedLanguage}
                    caseSensitive={false}
                    minLength={3}
                    penapis = 'mengandungi'
                    onChange={this.handleLangChange} />
            </div>
        );
    }
});

Apa yang saya perlukan ialah mendapatkan nilai yang dipilih pengguna dalam komponen induk. Saya mendapat ralat ini:

Uncaught TypeError: this.props.onSelectLanguage bukan fungsi

Bolehkah sesiapa membantu saya memikirkan masalahnya?

P.S. subkomponen sedang mencipta lungsur turun daripada fail json, saya memerlukan lungsur turun untuk memaparkan dua elemen tatasusunan json bersebelahan antara satu sama lain (cth: "aaa,english" sebagai pilihan!)

{
   "bahasa":[
      [
         "aaa",
         "bahasa Inggeris"
      ],
      [
         "aab",
         "sweden"
      ],
}

Answer 1

Hantar data daripada komponen anak kepada komponen induk

Dalam komponen induk:

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

Dalam komponen kanak-kanak:

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

Answer 2

Ini sepatutnya berkesan. Apabila menghantar kembali prop, anda menghantarnya sebagai objek dan bukannya menghantarnya sebagai nilai atau menggunakannya sebagai objek dalam komponen induk. Kedua, anda perlu memformat objek json untuk mengandungi pasangan nilai nama dan menggunakan atribut DropdownList

的 valueField 和 textField

Jawapan ringkas

Ibu bapa:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

Kanak-kanak:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

---

Butiran:

Editor:

Memandangkan React.createClass telah ditamatkan pada v16.0, adalah lebih baik untuk mencipta komponen React dengan melanjutkan React.Component . Menghantar data daripada komponen anak kepada komponen induk menggunakan sintaks ini akan kelihatan seperti ini

Ibu bapa

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

Kanak-kanak

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

---

Gunakan sintaks createClass yang OP gunakan dalam jawapannya Ibu bapa

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

Kanak-kanak

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