React:State

folder Projet: test_react_project
State: est une similaire à un propos mais il est private et controller par sa component ,c'est un objet javascript qui stock l'état des données de la component en temps reél,permettant de controller le comportement de la component
Le changement de la valeur du State implique le render de la component

Exemple

Créer la component TestState permettant d'afficher les valeur de sa State :

npx crcf components/TestState
TestState.js
import React, { Component } from "react";
import {Table} from 'react-bootstrap';

class TestState extends Component {
/*le constructeur de la component*/
/*props :récupérer les données envoyées par le prent s'elles existent*/
constructor(props) {
/*Envoyer les données props à la classe mère dans ce cas Component*/
super(props);
//Créer une state
this.state = {
produit:{
id: "1",
nom: "produit1",
qteStock: 40,
prix: 15.3
}
};

}
prixChange = (e) => {
this.setState({produit:{prix: e.target.value }});
};
render() {
return <div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{/*Afficher la valeur du state*/}

<tr>
<td>{this.state.produit.id}</td>
<td>{this.state.produit.nom}</td>
<td>{this.state.produit.qteStock}</td>
<td>{this.state.produit.prix}</td>
</tr>
</tbody>
</Table>
</div>;
}
}

export default TestState;


App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navigation from './components/navigation/navigation.js'
/*importer la component Test pour l'afficher */
import TestState from './components/TestState/TestState.js'
/*importer les composantes bootstrap utilisé dans App*/
import {Container} from 'react-bootstrap';


function App() {
return (
<div>
<Navigation />
<Container fluid>
{/*appler la TestState */}

<TestState />
</Container>
</div>
);
}

export default App;

Changer l'état d'une State

Modifier TestState.js
import React, { Component } from "react";
import {Table} from 'react-bootstrap';

class TestState extends Component {
/*le constructeur de la component*/
/*props :récupérer les données envoyées par le prent s'elles existent*/
constructor(props) {
/*Envoyer les données props à la classe mère dans ce cas Component*/
super(props);
//Créer une state
this.state = {
produit:{
id: "1",
nom: "produit1",
qteStock: 40,
prix: 15.3
}
};
/*Enregister la fonction */
this.prixChange = this.prixChange.bind(this);
}

//changer le state si le prix change
prixChange(event) {
this.setState({produit:{
...this.state.produit,/*Récupérer les anciens valeurs*/
prix: event.target.value /*Changer le prix*/
}});
}

render() {
/*changer la couleur du background selon la valeur saisie du prix */
const prix = this.state.produit.prix;
let couleur="";
if (prix>100) {
couleur ="red";
} else {
couleur ="white";
}
return <div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{/*Afficher la valeur du state*/}
<tr style={{"background" : couleur}}>
<td>{this.state.produit.id}</td>
<td>{this.state.produit.nom}</td>
<td>{this.state.produit.qteStock}</td>
<td>{this.state.produit.prix}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
{/*defaultValue :la valeur par défaut de l'input maintenant on peut changer la valeur
onChange:si la valeur change on appelle la fonction prixChange*/}
<input type="text" defaultValue ={this.state.produit.prix} onChange={this.prixChange} style={{"width" : "100%"}}/>
</td>
</tr>
</tbody>
</Table>
</div>;
}
}

export default TestState;