Comment transmettre des données du composant enfant au composant parent dans ReactJS ?

Question

J'essaie d'envoyer des données d'un composant enfant à son composant parent comme ceci :

const ParentComponent = React.createClass({
    getInitialState() {
        retour {
            langue: '',
        } ;
    },
    handleLanguageCode : fonction (langValue) {
        this.setState({langue : langValue});
    },

    rendre() {
         retour (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/>
                </div>
        );
});</pré>
<p>Voici le sous-composant : </p>
<pre class="brush:php;toolbar:false;">export const SelectLanguage = React.createClass({
    getInitialState : fonction(){
        retourner{
            Code sélectionné : ',
            Langue sélectionnée : ',
        } ;
    },

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

    rendre() {
        var json = require("json!../langues.json");
        var jsonArray = json.langues;
        retour (
            <div>
                <DropdownList ref='dropdown'
                    données={jsonArray}
                    value={this.state.selectedLanguage}
                    caseSensitive={faux}
                    minLongueur={3}
                    filtre='contient'
                    onChange={this.handleLangChange} />
            </div>
        );
    }
});</pré>
<p>Ce dont j'ai besoin, c'est d'obtenir la valeur sélectionnée par l'utilisateur dans le composant parent. J'obtiens cette erreur : </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError : this.props.onSelectLanguage n'est pas une fonction

Quelqu’un peut-il m’aider à résoudre le problème ?

Le sous-composant P.S. crée une liste déroulante à partir d'un fichier json, j'ai besoin de la liste déroulante pour afficher deux éléments d'un tableau json l'un à côté de l'autre (par exemple : "aaa, anglais" comme je préfère !)

{
   "langues":[
      [
         "aaa",
         "Anglais"
      ],
      [
         "aab",
         "suédois"
      ],
}

            

Answer 1

Transmettre les données du composant enfant au composant parent

Dans le composant parent :

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

Dans le composant enfant :

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

Answer 2

Cela devrait fonctionner. Lorsque vous renvoyez l'accessoire, vous l'envoyez en tant qu'objet au lieu de l'envoyer en tant que valeur ou de l'utiliser comme objet dans le composant parent. Deuxièmement, vous devez formater l'objet json pour qu'il contienne des paires nom-valeur et utiliser l'attribut DropdownList

的 valueField 和 textField

Réponse courte

Parent :

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

Enfants :

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

---

Détails :

Éditeur :

Étant donné que React.createClass est obsolète depuis la v16.0, il est préférable de créer des composants React en étendant React.Component. La transmission des données du composant enfant au composant parent en utilisant cette syntaxe ressemblera à ceci

Parent

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

Enfants

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

---

Utilisez la syntaxe createClass que l'OP a utilisée dans sa réponse 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>
        );
});

Enfants

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