que - ¿Cómo pasar datos del componente hijo a su padre en ReactJS?

que son los props en react

Question

Estoy tratando de enviar datos desde un componente hijo a su padre de la siguiente manera:

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

y aquí está el componente hijo:

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

Lo que necesito es obtener el valor seleccionado por usuario en el componente principal. Recibo este error:

Uncaught TypeError: this.props.onSelectLanguage is not a function

¿Alguien puede ayudarme a encontrar el problema?

PD: el componente secundario está creando un menú desplegable a partir de un archivo json, y necesito que la lista desplegable muestre ambos elementos de la matriz json uno al lado del otro (como "aaa, inglés" como la primera opción!)

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

Answer 1

El método React.createClass ha quedado en desuso en la nueva versión de React, puede hacerlo de la siguiente manera haciendo un componente funcional y otro componente de clase para mantener el estado:

Padre:

const ParentComp = () => {
  
  getLanguage = (language) => {
    console.log(''Language in Parent Component: '', language);
  }
  
  <ChildComp onGetLanguage={getLanguage}
};

Niño:

class ChildComp extends React.Component {
    state = {
      selectedLanguage: ''''
    }
    
    handleLangChange = e => {
        const language = e.target.value;
        thi.setState({
          selectedLanguage = language;
        });
        this.props.onGetLanguage({language}); 
    }

    render() {
        const json = require("json!../languages.json");
        const jsonArray = json.languages;
        const selectedLanguage = this.state;
        return (
            <div >
                <DropdownList ref=''dropdown''
                    data={jsonArray} 
                    value={tselectedLanguage}
                    caseSensitive={false} 
                    minLength={3}
                    filter=''contains''
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
};

Answer 2

Encontré el enfoque de cómo obtener datos del componente hijo en los padres cuando lo necesito.

Padre:

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

Niño:

class ChildComponent extends Component{
  constructor(props){
    super(props);

    if (props.getCurrentPoint){
      props.getCurrentPoint(this.getMapPoint.bind(this));
    }
  }

  getMapPoint(){
    return this.Point;
  }
}

Este ejemplo muestra cómo pasar la función del componente hijo al padre y usar esta función para obtener datos del hijo.

Answer 3

Esto debería funcionar. Mientras devuelve el accesorio, lo envía como un objeto, en lugar de enviarlo como un valor o, alternativamente, utilizarlo como un objeto en el componente principal. En segundo lugar, debe formatear su objeto json para contener pares de valores de nombre y usar el valueField y textField de DropdownList

Respuesta corta

Padre:

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

Niño:

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

Detallado:

EDITAR:

Teniendo en cuenta que React.createClass está en desuso desde la versión 16.0 en adelante, es mejor seguir adelante y crear un componente React extendiendo React.Component . Pasar datos del componente hijo al padre con esta sintaxis se verá así

Padre

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

Niño

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

Usando la sintaxis createClass que el OP usó en su respuesta 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>
        );
});

Niño

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

Answer 4

Para pasar datos del componente secundario al componente primario

En el componente principal:

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

En componente secundario:

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