Verarbeitung von Formulardaten durch Klick auf einen Button in React
In der vorherigen Lektion haben wir es so gemacht, dass bei der Eingabe eines Zeichens in das Inputfeld das Ergebnis sofort im Absatz erschien. Das sieht natürlich schön aus, hat aber einen Nachteil.
Stellen wir uns vor, wir müssen eine etwas "schwere", ressourcenintensive Operation durchführen. Es ist nicht sehr optimal, sie bei jeder Zeicheneingabe zu machen - es ist besser, auf die endgültige Dateneingabe zu warten und dann die benötigte Operation einmal auszuführen und das Ergebnis im Absatz auszugeben.
Dazu müssen wir einen Button einführen, bei dessen Klick unsere ressourcenintensive Operation durchgeführt wird. In diesem Fall hat jeder Input wieder seinen eigenen State, plus einen weiteren State benötigen wir für die Aufzeichnung des Operationsergebnisses und dessen Anzeige auf dem Bildschirm.
Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben zwei Inputfelder und einen Button. Bei Klick auf den Button lassen Sie uns die Summe der in die Inputfelder eingegebenen Zahlen ermitteln.
Implementieren wir es:
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>;
}
Man kann die gekürzte Variante verwenden:
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>;
}
Gegeben sind zwei Inputfelder, zwei Buttons und ein Absatz. Es sollen Zahlen in die Inputfelder eingegeben werden. Bei Klick auf den ersten Button ermitteln Sie die Summe der Zahlen, und bei Klick auf den zweiten Button - das Produkt. Das Ergebnis wird im Absatz ausgegeben.
Gegeben sind zwei Inputfelder, ein Button und ein Absatz. Es sollen in die Inputfelder Daten im Format 2025-12-31 eingegeben werden. Bei Klick auf den Button ermitteln Sie die Differenz zwischen den Daten in Tagen und geben das Ergebnis im Absatz aus.
Modifizieren Sie die vorherige Aufgabe so, dass standardmäßig das aktuelle Datum in den Inputfeldern steht.
Gegeben sind ein Inputfeld und ein Absatz. In das Inputfeld wird eine Zahl eingegeben. Beim Verlust des Fokus geben Sie im Absatz die Summe der Ziffern der eingegebenen Zahl aus.
Gegeben sind ein Inputfeld und ein Absatz. In das Inputfeld wird eine Zahl eingegeben. Beim Verlust des Fokus geben Sie im Absatz das Produkt der Teiler der eingegebenen Zahl aus.
