35 lines
1.3 KiB
JavaScript
35 lines
1.3 KiB
JavaScript
import InputAmount from './components/inputs/InputAmount';
|
|
|
|
function App(props) {
|
|
// const { } = props;
|
|
|
|
return (
|
|
<div className="container py-5">
|
|
<InputAmount />
|
|
|
|
<hr />
|
|
|
|
<div className="alert alert-primary">
|
|
<h2>
|
|
Übung 13: InputAmount um <strong>min</strong> und <strong>max</strong> Werte erweitern
|
|
</h2>
|
|
<p>
|
|
Endlich sind wir in der Lage die Anzahl in unserer <strong>InputAmount</strong>-Komponente zu verändern und
|
|
über der <strong>useState</strong>-Hook ein Rerendering der Komponente auszulösen.
|
|
</p>
|
|
<p>
|
|
Jetzt bist du gefragt: Erweitere die <strong>InputAmount</strong> Komponente, sodass der Wert des Eingabefelds
|
|
auf einen Bereich zwischen 0 und 10 begrenzt ist. Wenn der Benutzer versucht, den Wert unter 0 oder über 10 zu
|
|
setzen, soll der Wert auf 0 bzw. 10 gesetzt werden und der entsprechende Button deaktiviert werden.
|
|
</p>
|
|
<p>
|
|
<strong>Hinweis:</strong> In React kannst du das <strong>disabled</strong>-Attribut auf einem Button
|
|
verwenden, um ihn zu deaktivieren. Wenn der zugewiesene Wert true ist, wird der Button deaktiviert,
|
|
andernfalls bleibt er aktiv. Die Syntax sieht wie folgt aus
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default App;
|