81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
import { useState } from "react"
|
|
|
|
const Ajouter = ({ onCreation }) => {
|
|
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [category, setCategory] = useState("");
|
|
const [price, setPrice] = useState("");
|
|
const [quantity, setQuantity] = useState("");
|
|
const [imageName, setImageName] = useState("sqdc.jpg");
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault(); // Empêcher de reloader la page au submit.
|
|
|
|
// Appeler le comportement onCreation
|
|
onCreation({ title, description, category, price, quantity, imageName })
|
|
|
|
// Reset les états du formulaire.
|
|
setTitle("")
|
|
setDescription("")
|
|
setCategory("")
|
|
setPrice("")
|
|
setQuantity("")
|
|
setImageName("sqdc.jpg")
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="inventaire-form-container">
|
|
<form className="form-horizontal" onSubmit={handleSubmit}>
|
|
<h4 className="text-center">Ajouter un morceau</h4>
|
|
<div className="form-group">
|
|
<label>Morceau: </label>
|
|
<input className="form-control form-input" type='text'
|
|
placeholder="Ajouter Morceau"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Description: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Categorie: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="categorie"
|
|
value={category}
|
|
onChange={(e) => setCategory(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Prix: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="prix"
|
|
value={price}
|
|
onChange={(e) => setPrice(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Quantité: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="Quantité"
|
|
value={quantity}
|
|
onChange={(e) => setQuantity(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Nom Image: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="nom image"
|
|
value={imageName}
|
|
onChange={(e) => setImageName(e.target.value)} />
|
|
</div>
|
|
|
|
<input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Ajouter |