Tag 19 Forms in React, MUI, Toastify

Form Komponenten in React

React bietet integrierte Browserkomponenten zum Erfassen und Kontrollieren von Benutzereingaben. Mit Form-Komponenten können mehrere , oder <textarea> Benutzereingaben zu einem Formular Zusammengefasst werden. Anstatt jede Benutzereingabe einzeln zu behandeln, können alle Eingaben über einem Objekt behandelt werden.

Praktische Anwendung wäre Beispielsweise ein Anmeldeformular, bei dem der Benutzer Textfelder ausfüllen, Häkchen in Checkboxen (boolean) setzen oder Optionen auswählen kann. Abschließend wird auf einen „Registrierung Abschließen“-Button geklickt und die Informationen werden weitergeleitet. Möglicherweise mit einen Post-Request über http und im Backend wird ein neues Mitglied registriert.

Bis jetzt haben wir in der ToDo-Aufgabe nur ein Input verwendet

Was ist wenn wir mit mehreren Benutzereingaben arbeiten wollen?

Beispielsweise müssen wir in der BookLibrary-Aufgabe ISBN, Titel, Autor und Cover auf dem Frontend eingeben.

Links zum Weiterlesen https://de.reactjs.org/docs/forms.html https://legacy.reactjs.org/docs/forms.html https://www.w3schools.com/react/react_forms.asp

input

Bisher haben wir mit den Input-Typen Button und Text gearbeitet. Es gibt noch viele weitere Typen:

https://www.w3schools.com/html/html_form_input_types.asp https://codesandbox.io/s/nn1qhl?file=/App.js&utm_medium=sandpack

select

https://codesandbox.io/s/0v01n8?file=/App.js&utm_medium=sandpack

textarea

https://codesandbox.io/s/51echh?file=/App.js&utm_medium=sandpack

MUI

Bietet eine umfassende Palette von UI-Tools, mit denen neue Funktionen schneller bereitgestellt werden können. Komponenten der Kategorie Inputs, Data Display, Feedback, Layout oder Navigation stehen zur Auswahl.

Wollen wir die CSS für unser Frontend nicht selber machen sondern verlagern, können wir MUI Komponenten importieren.

Im Frontend-Ordner geben wir im Terminal folgenden Befehl ein:

npm install @mui/material @emotion/react @emotion/styled

Danach können wir mit dem stylen beginnen. https://mui.com/material-ui/react-button/

https://mui.com/material-ui/react-text-field/

MUI

Die Report Funktion bei MUI solltet lieber nicht benutzt werden

• Snackbar

React-Toastify

Wenn Backend aus, wie kann die Fehlermeldung angezeigt werden?

• MUI im Feedback Snackbar

• React-Toastify: https://www.npmjs.com/package/react-toastify

• npm i react-toastify import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';

  import 'react-toastify/dist/ReactToastify.css';

  function App(){ const notify = () => toast("Wow so easy!");

  return (

  Notify!
  ); }

• In Axios: .catch((error) => { toast.error("Unknown Error, try again later! " + error.response.statusText, {autoClose: 10000}) })

• GitHub Docs: Position, Type, Theme, Options