- Accueil
- Bibliothèque de Code
- React 配方管理
React 配方管理
4.0
fr
编程开发
React
配方管理
状态管理
Prompt
import React, { useState } from "react"; function App() { // State management const [tanks, setTanks] = useState([]); const [totalizers, setTotalizers] = useState([]); const [recipes, setRecipes] = useState([]); const [selectedRecipe, setSelectedRecipe] = useState(null); const [simulationStatus, setSimulationStatus] = useState(""); // Add a new tank const addTank = (name, quantity) => { if (name && quantity > 0) { setTanks([...tanks, { name, quantity }]); } else { alert("Veuillez entrer un nom valide et une quantité positive."); } }; // Add a new totalizer const addTotalizer = (type) => { if (type) { setTotalizers([...totalizers, { type, status: "Ready" }]); } else { alert("Veuillez entrer un type de totalizer."); } }; // Add a new recipe const addRecipe = (name, ingredients) => { if (name && ingredients) { const parsedIngredients = ingredients.split(",").reduce((acc, item) => { const [key, value] = item.split(":"); acc[key.trim()] = parseFloat(value.trim()); return acc; }, {}); setRecipes([...recipes, { name, ingredients: parsedIngredients }]); } else { alert("Veuillez entrer un nom de recette et des ingrédients valides."); } }; // Simulate a recipe const simulateRecipe = () => { if (selectedRecipe !== null) { const recipe = recipes[selectedRecipe]; let canProduce = true; for (const ingredient in recipe.ingredients) { const requiredQuantity = recipe.ingredients[ingredient]; const tank = tanks.find((t) => t.name === ingredient); if (!tank || tank.quantity < requiredQuantity) { canProduce = false; setSimulationStatus(`Échec : Pas assez de ${ingredient}.`); return; } } if (canProduce) { setTanks( tanks.map((tank) => recipe.ingredients[tank.name] ? { ...tank, quantity: tank.quantity - recipe.ingredients[tank.name] } : tank ) ); setSimulationStatus(`Succès : La recette "${recipe.name}" a été produite.`); } } else { alert("Veuillez sélectionner une recette."); } }; return ( <div style={{ padding: "20px", fontFamily: "Arial" }}> <h1>Simulation de Gestion des Recettes</h1> {/* Tanks Section */} <div style={{ marginBottom: "20px" }}> <h2>Tanks</h2> <ul> {tanks.map((tank, index) => ( <li key={index}> {tank.name} - {tank.quantity} unités </li> ))} </ul> <input id="tankName" placeholder="Nom du Tank" /> <input id="tankQuantity" type="number" placeholder="Quantité" /> <button onClick={() => addTank( document.getElementById("tankName").value, parseFloat(document.getElementById("tankQuantity").value) ) } > Ajouter Tank </button> </div> {/* Totalizers Section */} <div style={{ marginBottom: "20px" }}> <h2>Totalizers</h2> <ul> {totalizers.map((totalizer, index) => ( <li key={index}> {totalizer.type} - Status: {totalizer.status} </li> ))} </ul> <input id="totalizerType" placeholder="Type de Totalizer" /> <button onClick={() => addTotalizer(document.getElementById("totalizerType").value) } > Ajouter Totalizer </button> </div> {/* Recipes Section */} <div style={{ marginBottom: "20px" }}> <h2>Recettes</h2> <ul> {recipes.map((recipe, index) => ( <li key={index}> {recipe.name} - Ingrédients:{" "} {Object.entries(recipe.ingredients) .map(([key, value]) => `${key}: ${value}`) .join(", ")} </li> ))} </ul> <input id="recipeName" placeholder="Nom de la Recette" /> <input id="recipeIngredients" placeholder='Ingrédients (ex: "Cocoa Powder:50,Sugar:30")' /> <button onClick={() => addRecipe( document.getElementById("recipeName").value, document.getElementById("recipeIngredients").value ) } > Ajouter Recette </button> </div> {/* Simulation Section */} <div style={{ marginBottom: "20px" }}> <h2>Simulation</h2> <select onChange={(e) => setSelectedRecipe(e.target.value)} defaultValue="" > <option value="" disabled> Sélectionnez une recette </option> {recipes.map((recipe, index) => ( <option key={index} value={index}> {recipe.name} </option> ))} </select> <button onClick={simulateRecipe}>Lancer la Recette</button> <p style={{ fontWeight: "bold", color: simulationStatus.includes("Échec") ? "red" : "green" }}> {simulationStatus} </p> </div> </div> ); } export default App;
Résultat Généré
Plus de Recommandations
Voir ToutSystème de paiement VB
4.0
Informatique
fr
paiement
Visual Basic
Excel
SYSTEME DE GERER LES PAYMENT
EXPORTEAjouterClient PAR EXEL
EnregistrerPaiement
ColorerPaiements PAYE ET PARTIEL ET NO PAYE
RechercherClient
CHAQUE JOUR I CHAQUE JOUR ENREGESTRE UNE PAGE P...
Gestion des paiements
4.0
Informatique
fr
paiements
Excel
Visual Basic
SYSTEME DE GERER LES PAYMENT
EXPORTEAjouterClient PAR EXEL
EnregistrerPaiement
ColorerPaiements PAYE ET PARTIEL ET NO PAYE
RechercherClient
CHAQUE JOUR I CHAQUE JOUR ENREGESTRE UNE PAGE P...
Gestion des paiements quotidiens
4.0
Finance
fr
gestion
paiements
quotidien
SYSTEME DE GERER LES PAYMENT CHAQUE JOUR AVEC LE MONTENT PAYE ET LE REST AVEC DES COULAUR I CHAQUE JOUR ENREGESTRE UNE PAGE PAIMENT ...
Gestion des paiements journaliers
4.0
Finance
fr
gestion
paiements
journaliers
enregistrement
SYSTEME DE GERER LES PAYMENT CHAQUE JOUR AVEC LE MONTENT PAYE ET LE REST AVEC DES COULAUR I CHAQUE JOUR ENREGESTRE UNE PAGE PAIMENT ...
GitHub 是什么及其用途
4.0
技术
fr
GitHub
版本控制
软件开发
C EST quoi github et a quoi sert
...
Créer une app GPS avec Google Maps en HTML
4.0
Développement Web
fr
GPS
Google Maps
HTML
Application
crée une application GPS en utilisant google map en html
...