32 lines
1.2 KiB
React
32 lines
1.2 KiB
React
import InputPrice from './components/inputs/InputPrice';
|
|
|
|
function App(props) {
|
|
// const { } = props;
|
|
|
|
return (
|
|
<div className="container py-5">
|
|
<InputPrice />
|
|
<hr />
|
|
<div className="alert alert-primary">
|
|
<h2>Übung 14: InputPrice Komponente erweitern</h2>
|
|
<p>
|
|
Nachdem wir die <strong>InputAmount</strong>-Komponente erweitert haben, wollen wir nun die{' '}
|
|
<strong>InputPrice</strong>-Komponente erweitern.
|
|
</p>
|
|
<p>
|
|
Erweitere die <strong>InputPrice</strong>-Komponente, sodass der Wert des Eingabefelds auf eine Dezimalzahl
|
|
mit maximal zwei Nachkommastellen begrenzt ist. Wenn der Benutzer versucht, eine ungültige Eingabe zu machen,
|
|
soll das Eingabefeld rot umrandet werden.
|
|
</p>
|
|
<p>
|
|
<strong>Hinweis:</strong> Du kannst das <strong>style</strong>-Attribut verwenden, um das Aussehen eines
|
|
Elements zu ändern. Hier ist ein Beispiel, wie du das <strong>style</strong>-Attribut verwenden kannst.
|
|
Alternativ kannst du die Bootstrap-Klasse <strong>is-invalid</strong> verwenden, um das Eingabefeld rot zu
|
|
umranden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default App;
|