menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





Exercice:Ajouter un produit dans un panier

Créer une application qui pemert d'ajouter des produits dans un panie puis calculer le totale à payer,
une fois un produit est sélectionnée les input du prix et marque doivent etre remplis automatiquement à partir des du tableau des produit disponibles
en utlisant :State,filter ou find ...

Exemple :avec les components fonctionnels

import React, { useState } from 'react';

const TpFacture = () => {
  const [produit, setProduit] = useState({
    nom: '',
    marque: '',
    prix: 0,
    quantite: 0
  });

  const [panier, setPanier] = useState([]);
  const [totaleApayer, setTotaleApayer] = useState(0);

  const produitsDisponibles = [
    { nom: 'produit1', prix: 100, marque: 'marque1' },
    { nom: 'produit2', prix: 145, marque: 'marque2' },
    { nom: 'produit3', prix: 3, marque: 'marque3' }
  ];

  const getProduit = (event) => {
    const produitSelectionnee = produitsDisponibles.find((p) => p.nom === event.target.value);
    setProduit(produitSelectionnee);
  };

  const getQuantite = (event) => {
    setProduit({
      ...produit,
      quantite: event.target.value
    });
  };

  const ajouter = () => {
    if (produit.nom !== '' && produit.marque !== '' && produit.prix > 0 && produit.quantite > 0) {
      setPanier([...panier, produit]);
      setProduit({
        nom: '',
        marque: '',
        prix: 0,
        quantite: 0
      });
      setTotaleApayer(totaleApayer + produit.prix * produit.quantite);
    }
  };

  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>Produit</td>
            <td>
              <select name="nomproduit" onChange={getProduit}>
                {produitsDisponibles.map((p) => (
                  <option key={p.nom}>{p.nom}</option>
                ))}
              </select>
            </td>
          </tr>
          <tr>
            <td>Marque</td>
            <td><input type="text" value={produit.marque} readOnly /></td>
          </tr>
          <tr>
            <td>Prix</td>
            <td><input type="text" value={produit.prix} readOnly /></td>
          </tr>
          <tr>
            <td>Quantite</td>
            <td><input type="text" value={produit.quantite} onChange={getQuantite} /></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="button" value="Ajouter" onClick={ajouter} /></td>
          </tr>
        </tbody>
      </table>

      <h1>Panier</h1>
      <table>
        <thead>
          <tr>
            <th>Num</th>
            <th>Produit</th>
            <th>Marque</th>
            <th>Prix</th>
            <th>Quantite</th>
            <th>Totale</th>
          </tr>
        </thead>
        <tbody>
          {panier.map((prod, position) => (
            <tr key={position}>
              <td>{position + 1}</td>
              <td>{prod.nom}</td>
              <td>{prod.marque}</td>
              <td>{prod.prix}</td>
              <td>{prod.quantite}</td>
              <td>{prod.prix * prod.quantite}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <h2>Totale à payer: {totaleApayer}</h2>
    </div>
  );
};

export default TpFacture;
import React,{Component} from "react";
class TpFacture extends React.Component{
    constructor(props){
super(props)

this.state={
//utilisé pour créer un produit afin de l'ajouter dans le tableau panier
produit:{
nom:'',
marque:'',
prix:0,
quantite:0
},
//permet d'enregister les produit acheté
panier:[],
totaleApayer:0

}

this.produitsDisponibles=[
{nom:'produit1',prix:100,marque:'marque1'},
{nom:'produit2',prix:145,marque:'marque2'},
{nom:'produit3',prix:3,marque:'marque3'}
]
}

getProduit=(event)=>{
//chercher le produits dont le nom est sélectionnée
const produitSelectionnee= this.produitsDisponibles.find((p)=>p.nom==event.target.value);
/*remarque :la fonction find retourne le premier object trouvé
alors que filter retroune un tableau d'objet meme s'il trouve un seul objet
const listeproduitTrouve=this.produitsDisponibles.filter((p)=>p.nom==event.target.value);

*/


console.log(produitSelectionnee)
//initialser le prix et la marque du produit selectionné dans l'objet produit du state
this.setState({
produit:produitSelectionnee
})

}

getQuantite=(event)=>{
this.setState({
produit:{
...this.state.produit,
quantite:event.target.value
}
})
}


ajouter=()=>{
if(this.state.produit.nom!='' && this.state.produit.marque!='' && this.state.produit.prix>0 && this.state.produit.quantite>0)
{
/*
Remarque :
au lieu d'appeler à chaque fois les attribut du state avec this.state.
on peut sauvegarder les attributs dans des variable local comme:
const {produit , totaleApayer,....}=this.state
maintenent on peut travailler avec produit. et totaleApayer directement

*/
this.setState({
//ajoute le produit achété au panier
panier:[...this.state.panier,this.state.produit],

//initialiser l'objet produit du state afind 'ajouter un autre produit
produit:{ nom:'',
marque:'',
prix:0,
quantite:0
},
totaleApayer:this.state.totaleApayer+this.state.produit.prix*this.state.produit.quantite
})
}
}
render(){
return(<div>
<table>
<tr>
<td>Produit</td>
<td>
<select name="nomproduit" onChange={this.getProduit}>
{this.produitsDisponibles.map((p)=>{
return <option>{p.nom}</option>
})}
</select>
</td>
</tr>
<tr>
<td>Marque</td>
<td><input type="text" value={this.state.produit.marque}/></td>
</tr>
<tr>
<td>Prix</td>
<td><input type="text" value={this.state.produit.prix}/></td>
</tr>
<tr>
<td>Quantite</td>
<td><input type="text" value={this.state.produit.quantite} onChange={this.getQuantite}/></td>
</tr>

<tr>
<td></td>
<td><input type="button" value="Ajouter" onClick={this.ajouter}/></td>
</tr>
</table>

<h1>Panier</h1>
<table>
<tr>
<th>num</th>
<th>Produit</th>
<th>Marque</th>
<th>Prix</th>
<th>Quantite</th>
<th>Totale</th>
</tr>
{
this.state.panier.map((prod,position)=>{
return(<tr>
<td>{position+1}</td>
<td>{prod.nom}</td>
<td>{prod.marque}</td>
<td>{prod.prix}</td>
<td>{prod.quantite}</td>
<td>{prod.prix*prod.quantite}</td>

</tr>)
})
}
</table>
<h2>Totale à payer: {this.state.totaleApayer}</h2>
</div>)
}

}
export default TpFacture