76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { useState } from "react";
|
|
import '../styles/Termekfeltoltes.css';
|
|
|
|
function Termekfeltoltes() {
|
|
let [ujTermek, setUjTermek] = useState({
|
|
elado: "",
|
|
email: "",
|
|
telefonszam: "",
|
|
termekNev: "",
|
|
leiras: "",
|
|
ar: null
|
|
});
|
|
|
|
let esemenykezeles = (event) => {
|
|
let name = event.target.name;
|
|
let value = event.target.value;
|
|
setUjTermek(prevState => ({
|
|
...prevState,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
let feldolgozas = async (event) => {
|
|
try {
|
|
let api = await fetch("http://localhost:8000/termekek", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(ujTermek)
|
|
});
|
|
|
|
if (!api.ok) {
|
|
throw new Error(`Hiba történt! Hibajelzés: ${api.status}`);
|
|
}
|
|
} catch (error) {
|
|
console.error("Hiba történt az adatfeltöltés során:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1>Termék feltöltése</h1>
|
|
<div>
|
|
<form onSubmit={feldolgozas} action="/termekek">
|
|
<div>
|
|
<label>Termék neve:</label>
|
|
<input type='text' name="termekNev" value={ujTermek.termekNev} onChange={esemenykezeles}/>
|
|
<label>Termék leírása:</label>
|
|
<input type='text' name="leiras" value={ujTermek.leiras} onChange={esemenykezeles}/>
|
|
<label>Termék ára:</label>
|
|
<input type='number' name="ar" value={ujTermek.ar} onChange={esemenykezeles}/>
|
|
<label>Eladó neve:</label>
|
|
<input type='text' name="elado" value={ujTermek.elado} onChange={esemenykezeles}/>
|
|
<label>Email cím:</label>
|
|
<input type='email' name="email" value={ujTermek.email} onChange={esemenykezeles}/>
|
|
<label>Telefonszám:</label>
|
|
<input type='tel' name="telefonszam" value={ujTermek.telefonszam} onChange={esemenykezeles}/>
|
|
|
|
<select name="atveteliMod">
|
|
<option value="szemelyes">Személyes átvétel</option>
|
|
<option value="futar">Futárszolgálat</option>
|
|
<option value="mindketto">Mindkét lehetőség</option>
|
|
</select>
|
|
|
|
<button type='submit' name="elkuldes" >Termék feltöltése</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Termekfeltoltes;
|