Επεξεργασία δεδομένων φόρμας με πάτημα κουμπιού στο React
Στο προηγούμενο μάθημα κάναμε έτσι ώστε κατά την εισαγωγή χαρακτήρα σε ένα input, η παράγραφος να εμφανίζει αμέσως το αποτέλεσμα. Αυτό, φυσικά, φαίνεται όμορφο, αλλά έχει ένα μειονέκτημα.
Ας φανταστούμε ότι πρέπει να κάνουμε μια κάπως "βαριά", δαπανηρή σε πόρους λειτουργία. Δεν είναι πολύ βέλτιστο να την κάνουμε για κάθε εισαγωγή χαρακτήρα - είναι καλύτερα να περιμένουμε τον τελικό χαρακτήρα και μετά να εκτελέσουμε τη λειτουργία που χρειαζόμαστε μία φορά και το αποτέλεσμα να το εμφανίσουμε στην παράγραφο.
Για αυτό πρέπει να εισάγουμε ένα κουμπί, με πάτημα στο οποίο θα εκτελείται η δαπανηρή σε πόρους λειτουργία. Σε αυτή την περίπτωση, πάλι, κάθε input θα αντιστοιχεί στη δική του state, συν μια ακόμη state θα χρειαστούμε για την εγγραφή του αποτελέσματος της λειτουργίας και την εμφάνισή του στην οθόνη.
Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε δύο inputs και ένα κουμπί. Με πάτημα στο κουμπί ας βρούμε το άθροισμα των αριθμών που εισάγονται στα inputs.
Ας το υλοποιήσουμε:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
Μπορείτε να χρησιμοποιήσετε τη συντομευμένη εκδοχή:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
Δίνονται δύο inputs, δύο κουμπιά και μία παράγραφος. Ας εισάγονται αριθμοί στα inputs. Με πάτημα στο πρώτο κουμπί βρείτε το άθροισμα των αριθμών, και με πάτημα στο δεύτερο κουμπί - το γινόμενο. Το αποτέλεσμα να εμφανίζεται στην παράγραφο.
Δίνονται δύο inputs, ένα κουμπί και μία παράγραφος. Ας εισάγονται στο inputs ημερομηνίες στη μορφή 2025-12-31. Με πάτημα στο κουμπί βρείτε τη διαφορά μεταξύ των ημερομηνιών σε ημέρες και το αποτέλεσμα να εμφανιστεί στην παράγραφο.
Τροποποιήστε την προηγούμενη άσκηση έτσι ώστε από προεπιλογή στα inputs να υπάρχει η τρέχουσα ημερομηνία.
Δίνεται ένα input και μία παράγραφο. Στο input εισάγεται ένας αριθμός. Με απώλεια εστίασης εμφανίστε στην παράγραφο το άθροισμα των ψηφίων του εισαγμένου αριθμού.
Δίνεται ένα input και μία παράγραφο. Στο input εισάγεται ένας αριθμός. Με απώλεια εστίασης εμφανίστε στην παράγραφο το γινόμενο των διαιρετών του εισαγμένου αριθμού.
