React és az űrlap feldolgozás

Első példánkban a klasszikus testtömeg index számítás alapadatait fogjuk űrlap segítségével elküldeni a szervernek, majd a választ megjeleníteni.

API végpont példa adatokkal:
https://informatikaora.hu/webprog/tti.php/?kg=90&cm=200

Minta az API hívás eredményére JSON formában:
{„kg”:”70″,”cm”:”178″,”tti”:22.09,”minosites”:”normál testalkat”,”testkep”:”body_correct.gif”,”tobblet”:0}

import { useState } from "react";
import bodyCorrect from "./assets/body_correct.gif"
import bodyFat from "./assets/body_fat.gif"
import bodyThin from "./assets/body_thin.gif"
/*
  kepValasztas: segédfüggvény, amely a szerverről kapott 'testkep'
  (fájlnévet vár, pl. "body_correct.gif") alapján visszaadja a
  komponens által importált képmodult.
*/
const kepValasztas = (testkep)=> {
    if (testkep === "body_correct.gif") return bodyCorrect;
    if (testkep === "body_fat.gif") return bodyFat;
    if (testkep === "body_thin.gif") return bodyThin;
    return null;
};
export default function Tti() {
    // React state változók
    // testsuly: a felhasználó által beírt testsúly (kg)
    // magassag: a felhasználó által beírt magasság (cm)
    // eredmeny: a szerverről érkező JSON objektum, amely a kalkulált adatokat tartalmazza
    // hiba: üzenet megjelenítésére hiba vagy validáció esetén
    const [testsuly, setTestsuly] = useState(null);
    const [magassag, setMagassag] = useState(null);
    const [eredmeny, setEredmeny] = useState(null);
    const [hiba, setHiba] = useState("");
    /*
      kuldes: async függvény, amely validálja a bemenetet, majd lekéri
      a távoli kalkulációt a megadott API-ról. 
      Ellenőrzi, hogy a bemenetek számok-e (isNaN) 
      Fetch-tel lekéri az eredményt JSON-ként feldolgozva.
      Hibák esetén a hibaüzenetet a state-be írjuk, amelyet majd a {hiba && <p>{hiba}</p>} rész jelenít meg.
    */
    const kuldes = async ()=> {
        if (isNaN(testsuly) || isNaN(magassag)){
            setHiba("Számot írj be!")
            return
        }
        // előző hibák törlése
        setHiba(""); 
        // összeállítjuk a lekérdezés URL-jét a backend elvárt query paramétereivel
        const url=`https://informatikaora.hu/webprog/tti.php/?kg=${testsuly}&cm=${magassag}`;
        try{
            const response = await(fetch(url))
            // ha a HTTP státusz nem OK, dobunk egy kivételt, amit a catch kezel
            if(!response.ok){throw new Error(`Hiba! ${response.status} `)}  
            // JSON adat feldolgozása, és a state frissítése
            const kapottAdatok = await response.json();
            setEredmeny(kapottAdatok);            
           }
        catch(error){
            setHiba(`Hiba! ${error.message}`)
        }
    }

    return(
        <div>
            <h1>Testtömeg index kalkulátor</h1>
             {/* 
              a form onSubmit-jét megakadályozzuk, mert nem akarunk
              oldalfrissítést (default submit).
            */}
            <form onSubmit={(e) => e.preventDefault() }>
                <label>
                    Testsúly
                    <input type="number"
                           value={testsuly} 
                           onChange={ (e) => setTestsuly(e.target.value) }
                           required 
                           min="1"
                           max="200"
                             />
                </label><br/> 
                <label>
                    Magasság
                    <input type="number"
                           value={magassag} 
                           onChange={ (e) => setMagassag(e.target.value) }
                           required 
                           min="50"
                           max="250"
                             />
                </label><br/>
                 {/* a gomb meghívja a kuldes függvényt, amely elvégzi a validációt és a fetch-t */}
                <button type="button" onClick={kuldes}> Számold ki! </button>                  
            </form>
            {/* hibák, Conditional Rendering
            Ha a hiba értéke igaz akkor a JavaScript kiértékeli és visszaadja a jobb oldalon lévő kifejezést */}
            {hiba && <p>{hiba}</p>}
            {/* adatok */}
            {eredmeny && (
                <div>
                    <h2>Eredmény</h2>
                    <p>
                        Testkép: <img src={kepValasztas(eredmeny.testkep)}   />
                    </p>
                    <p>Magasság: {eredmeny.cm} cm</p>
                    <p>Súly: {eredmeny.kg} kg</p>
                    <p>Testtömeg indexe: {eredmeny.tti}</p>
                    <p>Minősítés: {eredmeny.minosites}</p>
                    <p>Többlet: {eredmeny.tobblet}</p>
                </div>
            )}
        </div>
    )
}

100

101

102

103

104

105

import { useState } from "react";

import bodyCorrect from "./assets/body_correct.gif"

import bodyFat from "./assets/body_fat.gif"

import bodyThin from "./assets/body_thin.gif"

kepValasztas: segédfüggvény, amely a szerverről kapott 'testkep'

(fájlnévet vár, pl. "body_correct.gif") alapján visszaadja a

komponens által importált képmodult.

const kepValasztas = (testkep)=> {

if (testkep === "body_correct.gif") return bodyCorrect;

if (testkep === "body_fat.gif") return bodyFat;

if (testkep === "body_thin.gif") return bodyThin;

return null;

};

export default function Tti() {

// React state változók

// testsuly: a felhasználó által beírt testsúly (kg)

// magassag: a felhasználó által beírt magasság (cm)

// eredmeny: a szerverről érkező JSON objektum, amely a kalkulált adatokat tartalmazza

// hiba: üzenet megjelenítésére hiba vagy validáció esetén

const [testsuly, setTestsuly] = useState(null);

const [magassag, setMagassag] = useState(null);

const [eredmeny, setEredmeny] = useState(null);

const [hiba, setHiba] = useState("");

kuldes: async függvény, amely validálja a bemenetet, majd lekéri

a távoli kalkulációt a megadott API-ról.

Ellenőrzi, hogy a bemenetek számok-e (isNaN)

Fetch-tel lekéri az eredményt JSON-ként feldolgozva.

Hibák esetén a hibaüzenetet a state-be írjuk, amelyet majd a {hiba && <p>{hiba}</p>} rész jelenít meg.

const kuldes = async ()=> {

if (isNaN(testsuly) || isNaN(magassag)){

setHiba("Számot írj be!")

return

}

// előző hibák törlése

setHiba("");

// összeállítjuk a lekérdezés URL-jét a backend elvárt query paramétereivel

const url=`https://informatikaora.hu/webprog/tti.php/?kg=${testsuly}&cm=${magassag}`;

try{

const response = await(fetch(url))

// ha a HTTP státusz nem OK, dobunk egy kivételt, amit a catch kezel

if(!response.ok){throw new Error(`Hiba! ${response.status} `)}

// JSON adat feldolgozása, és a state frissítése

const kapottAdatok = await response.json();

setEredmeny(kapottAdatok);

}

catch(error){

setHiba(`Hiba! ${error.message}`)

}

return(

<div>

<h1>Testtömeg index kalkulátor</h1>

{/*

a form onSubmit-jét megakadályozzuk, mert nem akarunk

oldalfrissítést (default submit).

*/}

<form onSubmit={(e) => e.preventDefault() }>

<label>

Testsúly

<input type="number"

value={testsuly}

onChange={ (e) => setTestsuly(e.target.value) }

required

min="1"

max="200"

</label><br/>

<label>

Magasság

<input type="number"

value={magassag}

onChange={ (e) => setMagassag(e.target.value) }

required

min="50"

max="250"

</label><br/>

{/* a gomb meghívja a kuldes függvényt, amely elvégzi a validációt és a fetch-t */}

<button type="button" onClick={kuldes}> Számold ki! </button>

</form>

{/* hibák, Conditional Rendering

Ha a hiba értéke igaz akkor a JavaScript kiértékeli és visszaadja a jobb oldalon lévő kifejezést */}

{hiba && <p>{hiba}</p>}

{/* adatok */}

{eredmeny && (

<div>

<h2>Eredmény</h2>

<p>

Testkép: <img src={kepValasztas(eredmeny.testkep)} />

</p>

<p>Magasság: {eredmeny.cm} cm</p>

<p>Súly: {eredmeny.kg} kg</p>

<p>Testtömeg indexe: {eredmeny.tti}</p>

<p>Minősítés: {eredmeny.minosites}</p>

<p>Többlet: {eredmeny.tobblet}</p>

</div>

)}

</div>

)

}

2. példa

Ez a példa egy interaktív űrlapot jelenít meg, és a felhasználó által megadott értékeket állapotban (state) tárolja. Az űrlap többféle input elemet tartalmaz:

szövegmező (text)
rádiógombok (radio)
checkbox (checkbox)
slider (range) (slider)
többszörös választás (select-multiple) (select)

A komponens célja, hogy a felhasználó által megadott értékeket valós időben frissítse és megjelenítse. A useState hook segítségével definiál egy formData objektumot. Minden input elem rendelkezik name attribútummal, ami megegyezik az objektum kulcsaival. Az onChange eseménykezelő (handleChange) így működik: szöveg, rádiógomb, csúszka: egyszerűen a value alapján frissíti az adott mezőt.
Checkbox: a checked értéket (true/false) menti. Select-multiple: az összes kiválasztott opciót tömbbé alakítja (Array.from(options)), majd eltárolja.

import React, { useState } from "react";
import "./Urlapos.css";

function Urlapos() {
  const [formData, setFormData] = useState({
    text: "",
    radio: "",
    checkbox: false,
    slider: 50,
    select: [],
  });

  const handleChange = (e) => {
    const { name, value, type, checked, options } = e.target;

    if (type === "checkbox") {
      setFormData({ ...formData, [name]: checked });
    } else if (type === "select-multiple") {
      const selectedValues = Array.from(options)
        .filter((option) => option.selected)
        .map((option) => option.value);
      setFormData({ ...formData, [name]: selectedValues });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  return (
    <div className="form-container">
      <h2>Űrlap példa</h2>
      <form className="form">
        {/* Szövegmező */}
        <div className="form-group">
          <label>Szöveg:</label>
          <input
            type="text"
            name="text"
            value={formData.text}
            onChange={handleChange}
          />
        </div>

        {/* Rádiógomb */}
        <div className="form-group">
          <label>Válassz egy opciót:</label>
          <div className="radio-group">
            <label>
              <input
                type="radio"
                name="radio"
                value="Opció 1"
                checked={formData.radio === "Opció 1"}
                onChange={handleChange}
              />
              Opció 1
            </label>
            <label>
              <input
                type="radio"
                name="radio"
                value="Opció 2"
                checked={formData.radio === "Opció 2"}
                onChange={handleChange}
              />
              Opció 2
            </label>
          </div>
        </div>

        {/* Checkbox */}
        <div className="form-group">
          <label>
            <input
              type="checkbox"
              name="checkbox"
              checked={formData.checkbox}
              onChange={handleChange}
            />
            Elfogadom a feltételeket
          </label>
        </div>

        {/* Slider */}
        <div className="form-group">
          <label>Mennyire szereted a React-et? {formData.slider}</label>
          <input
            type="range"
            name="slider"
            min="0"
            max="100"
            value={formData.slider}
            onChange={handleChange}
          />
        </div>

        {/* Select multiple */}
        <div className="form-group">
          <label>Kedvenceim:</label>
          <select
            name="select"
            multiple
            value={formData.select}
            onChange={handleChange}
          >
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="javascript">js</option>
            <option value="typescript">typescript</option>
          </select>
        </div>
      </form>

      {/* Megjelenítés */}
      <div className="output-box">
        <h3>Kiválasztott értékek:</h3>
        <p><strong>Szöveg:</strong> {formData.text}</p>
        <p><strong>Rádió:</strong> {formData.radio}</p>
        <p><strong>Checkbox:</strong> {formData.checkbox ? "Igen" : "Nem"}</p>
        <p><strong>Slider:</strong> {formData.slider}</p>
        <p><strong>Select:</strong> {formData.select.join(", ")}</p>
      </div>
    </div>
  );
}

export default Urlapos;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

import React, { useState } from "react";

import "./Urlapos.css";

function Urlapos() {

const [formData, setFormData] = useState({

text: "",

radio: "",

checkbox: false,

slider: 50,

select: [],

});

const handleChange = (e) => {

const { name, value, type, checked, options } = e.target;

if (type === "checkbox") {

setFormData({ ...formData, [name]: checked });

} else if (type === "select-multiple") {

const selectedValues = Array.from(options)

.filter((option) => option.selected)

.map((option) => option.value);

setFormData({ ...formData, [name]: selectedValues });

} else {

setFormData({ ...formData, [name]: value });

}

};

return (

<h2>Űrlap példa</h2>

{/* Szövegmező */}

<label>Szöveg:</label>

<input

type="text"

name="text"

value={formData.text}

onChange={handleChange}

</div>

{/* Rádiógomb */}

<label>Válassz egy opciót:</label>

<label>

<input

type="radio"

name="radio"

value="Opció 1"

checked={formData.radio === "Opció 1"}

onChange={handleChange}

Opció 1

</label>

<label>

<input

type="radio"

name="radio"

value="Opció 2"

checked={formData.radio === "Opció 2"}

onChange={handleChange}

Opció 2

</label>

</div>

{/* Checkbox */}

<label>

<input

type="checkbox"

name="checkbox"

checked={formData.checkbox}

onChange={handleChange}

Elfogadom a feltételeket

</label>

</div>

{/* Slider */}

<label>Mennyire szereted a React-et? {formData.slider}</label>

<input

type="range"

name="slider"

min="0"

max="100"

value={formData.slider}

onChange={handleChange}

</div>

{/* Select multiple */}

<label>Kedvenceim:</label>

<select

name="select"

multiple

value={formData.select}

onChange={handleChange}

<option value="typescript">typescript</option>

</select>

</div>

</form>

{/* Megjelenítés */}

<h3>Kiválasztott értékek:</h3>

<p><strong>Szöveg:</strong> {formData.text}</p>

<p><strong>Rádió:</strong> {formData.radio}</p>

<p><strong>Checkbox:</strong> {formData.checkbox ? "Igen" : "Nem"}</p>

<p><strong>Slider:</strong> {formData.slider}</p>

<p><strong>Select:</strong> {formData.select.join(", ")}</p>

</div>

);

}

export default Urlapos;

React és az űrlap feldolgozás

2. példa

Kategóriák

Friss bejegyzések

React Outlet

React NavLink, UseNavigate