React:Passage données Child vers parent
Exemple :Passage des données Child-->Parent
import React, { Component } from "react";
class Child extends Component {
constructor(props) {
super(props);
/*Créer une state qui sera utilisé dans le formulaire*/
this.state = {
nom:"",
prenom:""
}
/*Ecouter les changment des input pour modifier le state */
this.changerEtat = this.changerEtat.bind(this);
}
/*Modifier le nom et le prenom du state*/
changerEtat(event) {
this.setState({
[event.target.name]: event.target.value
});
}
/*Envoyer les données au parent*/
traiterPuisEnvoyerAuParent = () => {
let donneesAenvoyer={
nom:this.state.nom,
prenom:this.state.prenom,
}
/*Appler Envoyer les données au parent*/
this.props.traiterPuisEnvoyerAuParent(donneesAenvoyer);
};
/*Afficher l'interface*/
render() {
return (
<div className="card text-success card bg-light mb-3">
<div className="card-header">Je suis Child de APP</div>
<div className="card-body">
<input value={this.state.nom} onChange={e => this.changerEtat(e)} name="nom" className="form-control" type="text" placeholder="Nom"/>
<input value={this.state.prenom} onChange={e => this.changerEtat(e)} name="prenom" className="form-control" type="text" placeholder="Prenom"/>
<input onClick={this.traiterPuisEnvoyerAuParent} className="form-control btn btn-success " type="button" value="Envoyer"/>
</div>
</div>
);
}
}
export default Child;
App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navigation from './components/navigation/navigation.js'
/*importer la component child pour l'afficher */
import Child from './components/child/child.js'
/*importer les composantes bootstrap utilisé dans App*/
import {Container} from 'react-bootstrap';
import React, { Component } from "react";
class App extends Component {
/*Création et initialisation de la state*/
state = {
donnees:{
nom:"Null",
prenom: "Null"
}
}
/*Traiter les données une fois reçues du child*/
getDataFromChild = (data) =>{
this.setState({donnees:{
...this.state.donnees,
nom: data.nom,
prenom: data.prenom
}});
}
render()
{
return (
<div>
<Navigation />
<Container fluid>
<div className="card text-danger card bg-warning mb-3">
<div className="card-header">Hi je suis parent J'attends</div>
<div className="card-body">
Data from my Child :<br/>
Nom:<b>{this.state.donnees.nom }</b> <br/>
Prenom:<b>{this.state.donnees.nom }</b> <br/>
</div>
</div>
{/*Appler la méthode traiterPuisEnvoyerAuParent du child puis traiter les données avec getDataFromChild*/}
<Child traiterPuisEnvoyerAuParent={this.getDataFromChild}/>
</Container>
</div>
);
}
}
export default App;