Saltar al contenido

Cómo pasar un objeto JSON de un componente hijo a un componente padre en reacción

Es importante implementar la función de retrollamada para que una vez que cualquier acción desencadene el componente hijo, se transmita al componente padre.

Veamos un ejemplo de implementación de un simple formulario que pasa el mensaje como entrada de texto impulsado por el control del formulario, así:

Cómo pasar un objeto JSON de un componente hijo a un componente padre en reacción
Cómo pasar un objeto JSON de un componente hijo a un componente padre en reacción
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849importReact,{Componente}de "reaccionar";classDemo2extiendeComponente{constructor(){super();this.state={ saludoMensaje:"",};this.onMessageChange=este.onMessageChange. bind(this);this.onSubmit=this.onSubmit.bind(this);}onMessageChange(event){let message = event.target.value;this.setState({ greetingMessag: message });}// pasar el mensaje al componente padre usando callbackonSubmit(){this.props.onSubmitMessage(this.state. greetingMessag);}render(){return(<div><p>Pasar datos del componente hijo al padre</p>tr// <tableborder="2">tr><tdcolspan="2">Pasar mensaje de saludo al componente padre</td>/tr>tr>td;td;Escribir mensaje de saludo : Introducir tipo="text "onCambiar={esto. onMessageChange}/{this.onSubmit};

jsx

Déjeme explicarle este ejemplo.

  • Tenemos un valor de estado, greetingMessage, que puede actualizarse una vez que el usuario cambia el valor de entrada y puede enviarlo al componente principal.
  • Entonces, hay dos métodos diferentes. Uno es onMessageChange(), que se utiliza para actualizar el valor de estado cuando un usuario cambia el valor de entrada, y el otro es onSubmit(), que se utiliza para pasar el mensaje actualizado al componente padre como una función de devolución de llamada.
  • Hay un formulario implementado que contiene el control de entrada y el botón para enviar el formulario tan pronto como un usuario hace clic en el botón de envío.

La parte principal es el método onSubmit(), que obtiene el método como un accesorio y pasa el mensaje actualizado al componente padre.

123onSubmit(){this.props.onSubmitMessage(this.state.greetingMessag);}

jsx

Así que después de pasar el mensaje actualizado al componente padre, consumirlo en el componente padre, así:

12345678910111213141516171819202122232425262728293031323334353637importReact,{Componente}de "reaccionar";importar{ renderizar }de "reaccionar-dom";importarDemo2de". /demo2";classAppextendsComponent{constructor(){super();this.state={ message:"",};this.onSubmitMessage=this.onSubmitMessage.bind(this);}onSubmitMessage(message){this. setState({ mensaje: mensaje });}render(){const{ empleado, mensaje }=este.state;return(<div>div>Pasar datos de padre a componente hijo</div>div> El mensaje que viene del componente hijo es : {message}</div>hr/> <Demo2 // pasar como función de devolución de llamada enSubmitMessage={this.onSubmitMessage} / /div.;);}}render(<App/;};,document.getElementById("root"));

jsx

En el ejemplo anterior, se ha implementado la función de devolución de llamada.

123onSubmitMessage(message){this.setState({ message: message });}

jsx

Así que tan pronto como el usuario haga clic en el botón de envío del componente infantil, la página será redirigida al componente padre, y usted podrá utilizarla en función de su viabilidad.

Después de obtener el mensaje del componente hijo como un argumento de la función onSubmitMessage, configúralo en el valor de estado y consúmelo así:

1234567891011121314151617render(){const{ empleado, mensaje }=esto. state;return(<div>div>Pasar datos del padre al componente hijo</div;};div; El mensaje que viene del componente hijo es : {message}</div>hr/&; <Demo2 // pasar como función de devolución de llamada enSubmitMessage={this.onSubmitMessage} /...y que no se puede hacer nada más.
jsx

De la misma manera, pasa el objeto JSON del componente hijo al componente padre como lo harías con los valores normales como texto, número, matriz, objeto, etc.

Crear los datos JSON en el estado del componente padre, así:

1234567891011121314151617181920constructor(){super();this.state={ jsonData:[{ id:1, nombre: "Esto es prueba1"},{ id:2, nombre: "Esto es prueba2"},{ id:3, nombre: "Esto es prueba3"}]};this.onSubmit=this.onSubmit.bind(this);}

jsx

Los nuevos datos JSON, jsonData, se crean, y puedes pasarlos como datos de devolución de la función una vez que actives la función de devolución, así:

123onSubmit(){this.props.onSubmitMessage(this.state.jsonData);}

jsx

Ahora, consuma los datos JSON en el componente padre, así:

123onSubmitMessage(message){this.setState({ message: message });}

jsx

Este es el método del componente padre, que se puede activar cuando el usuario hace clic en el botón de envío del componente hijo. Después, puede consumir todo el objeto JSON así:

1234567891011121314151617181920212223render(){const{ message }=this.state;return(<div><div>Pasar los datos de los padres al componente de los hijos</div map(item==={Nretorno(}{N-tr};} {elemento.id} : {N-{N-]} {elemento.id}. name}</td²;};})}</tabla};};/div²;};hr/&&&div²;};Demo2onSubmitMessage={this.onSubmitMessage}/&</div²;};}

jsx

Note que el objeto JSON completo está siendo mapeado en la función render(), que mapea los diferentes objetos a partir de los datos JSON.