Erstellen eines Benutzer-Feedback-Formulars mit Perseid und React

In diesem Leitfaden gehen wir Schritt für Schritt durch die Erstellung eines dynamischen Benutzer-Feedback-Formulars mithilfe der @perseid/form-Bibliothek, einer leistungsstarken Alternative zu Formik und React Hook Form. Sie werden sehen, wie @perseid/form die Verwaltung des Formularstatus, der Validierung und des bedingten Renderings erleichtert. Das von uns erstellte Formular fordert Benutzer auf, einen Service zu bewerten und Feedback zu geben. Abhängig von der Bewertung wird entweder eine „Dankeschön“-Nachricht angezeigt oder der Benutzer wird aufgefordert, zusätzliches Feedback zu geben.

? Fangen wir an!

---

Schritt 1: Einrichten der Formularkonfiguration

Der erste Schritt besteht darin, die Formularkonfiguration zu definieren. Diese Konfiguration beschreibt, wie sich das Formular verhält, einschließlich der Felder, Schritte und des Flusses zwischen ihnen. Hier erstellen wir Felder für eine Bewertung und eine Rezension, mit bedingter Logik basierend auf der Bewertung des Benutzers. Wir definieren auch Nachrichten für positives und negatives Feedback.

Hier ist der Konfigurationscode:

import { type Configuration } from "@perseid/form";

const formConfiguration: Configuration = {
  // Root step-the form will start from there.
  root: "feedback",
  // Callback triggered on form submission.
  onSubmit(data) {
    alert(`Submitting the following JSON: ${JSON.stringify(data)}`);
    return Promise.resolve();
  },
  // `fields` define the data model the form is going to deal with.
  // Expect the submitted data JSON to match this schema.
  fields: {
    rating: {
      type: "integer",
      required: true,
    },
    review: {
      type: "string",
      required: true,
      // Display this field only if condition is met...
      condition: (inputs) =>
        inputs.rating !== null && (inputs.rating as number) < 3,
    },
    // Type `null` means that the value of this field will not be included in submitted data.
    submit: {
      type: "null",
      submit: true,
    },
    message_good: {
      type: "null",
    },
    message_bad: {
      type: "null",
    },
  },
  // Now that fields are defined, you can organize them in a single or multiple steps,
  // depending on the UI you want to build!
  steps: {
    feedback: {
      fields: ["rating", "review", "submit"],
      // Whether to submit the form at the end of this step.
      submit: true,
      // Next step is conditionned to previous user inputs...
      nextStep: (inputs) =>
        (inputs.rating as number) < 3 ? "thanks_bad" : "thanks_good",
    },
    thanks_good: {
      fields: ["message_good"],
    },
    thanks_bad: {
      fields: ["message_bad"],
    },
  },
};

In dieser Konfiguration:

• Das Formular beginnt mit dem Feedback-Schritt.
• Das Formular enthält zwei Felder: Bewertung (erforderlich) und Rezension (optional, es sei denn, die Bewertung liegt unter 3).
• Basierend auf der Bewertung navigiert das Formular entweder zur „guten“ oder „schlechten“ Feedback-Nachricht.
• Beim Absenden des Formulars wird eine einfache Warnung mit den übermittelten Daten ausgelöst.

Der entscheidende Punkt, den es hier zu verstehen gilt, ist die Funktion der Fields-Eigenschaft. Es definiert die Struktur der Daten, die übermittelt werden und fungiert im Wesentlichen als Datenmodell. Im Gegensatz dazu beschreibt die Schritte-Eigenschaft den Formularablauf und bestimmt, wie diese Felder dem Benutzer präsentiert werden.

---

Schritt 2: Erstellen der Reaktionskomponenten des Formulars

Da wir nun die Konfiguration haben, ist es an der Zeit, die eigentliche Benutzeroberfläche zu erstellen, die das Formular rendert. Mit @perseid/form/react können wir benutzerdefinierte Feldkomponenten erstellen, um Benutzerinteraktionen für jeden Teil des Formulars zu verwalten.

Hier ist die Kernkomponente von React:

import React from "react";
import Form, { type FormFieldProps } from "@perseid/form/react";

// The actual React component, used to build the UI!
function Field(props: FormFieldProps): JSX.Element {
  const { path, engine, value, status } = props;
  const [currentRating, setCurrentRating] = React.useState(0);

  // Display a different element depending on the field...

  if (path === "thanks_good.1.message_good") {
    return (
      <div className="message">
        <h1>Thanks for the feedback ?</h1>
        <p>We are glad you enjoyed!</p>
      </div>
    );
  }

  if (path === "thanks_bad.1.message_bad") {
    return (
      <div className="message">
        <h1>We're sorry to hear that ?</h1>
        <p>We'll do better next time, promise!</p>
      </div>
    );
  }

  if (path === "feedback.0.rating") {
    return (
      // Depending on the field status, define some extra classes for styling...
      <div
        className={`rating ${status === "error" ? "rating--error" : ""}`}
        onMouseLeave={() => {
          setCurrentRating((value as number | null) ?? 0);
        }}
      >
        <h1>How would you rate our service?</h1>
        {[1, 2, 3, 4, 5].map((rating) => (
          <span
            key={rating}
            className={`rating__star ${
              currentRating >= rating ? "rating__star--active" : ""
            }`}
            onMouseEnter={() => {
              setCurrentRating(rating);
            }}
            onClick={() => {
              // On click, notify the form engine about new user input.
              engine.userAction({ type: "input", path, data: rating });
            }}
          ></span>
        ))}
      </div>
    );
  }

  if (path === "feedback.0.review") {
    return (
      <div className={`review ${status === "error" ? "review--error" : ""}`}>
        <label>Could you tell us more?</label>
        <textarea
          onChange={(e) =>
            engine.userAction({ type: "input", path, data: e.target.value })
          }
        />
      </div>
    );
  }

  // path === 'feedback.0.submit'
  return (
    <button
      className="submit"
      onClick={() => {
        engine.userAction({ type: "input", path, data: true });
      }}
    >
      Submit
    </button>
  );
}

Hier verwendet die Feldkomponente die Pfadstütze, um zu entscheiden, was gerendert werden soll:

• Eine Bewertungskomponente, in der Benutzer eine Sternebewertung auswählen können.
• Ein Textbereich für Benutzer, um zusätzliches Feedback zu geben.

„Dankeschön“-Nachrichten, die basierend auf der Bewertung angezeigt werden. Das Formular passt seine Felder und Schritte basierend auf Benutzereingaben dynamisch an.

Ziemlich cool, oder?

---

Schritt 3: Ausführen der Anwendung

Da nun unsere Formularkonfiguration und -komponente fertig sind, integrieren wir sie in eine grundlegende React-App. Hier ist der Code zum Initialisieren und Rendern des Formulars:

import { createRoot, type Root } from "react-dom/client";

// Let's run the app!
let app: Root;

// Creating React root...
const container = document.querySelector("#root") as unknown as HTMLElement;
app = createRoot(container);
app.render(
  // Router is the main component for any Perseid app.
  <Form Field={Field} configuration={formConfiguration} />
);

Dieser Code mountet das Formular mithilfe der createRoot-API von React im DOM. Die Formularkomponente, die unsere Konfigurations- und Feldkomponente verbindet, kümmert sich um alles andere.

Schritt 4: Stile hinzufügen

Okay, wir haben unsere App-Logik, aber wenn Sie den Code jetzt ausführen, werden Sie feststellen, dass er etwas... roh ist?

Also, lasst uns das Formular aufpeppen, indem wir einige Stile und Animationen hinzufügen! Unten finden Sie ein einfaches Stylesheet, das es viel ansprechender macht:

// A few animations for fun...

@keyframes swipe-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  75% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes swipe-in-one {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes swipe-in-two {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  75% {
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}

@keyframes bubble-in {
  0% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// Some global basic styling...

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  height: 100vh;
  color: #aaaaaa;
  align-items: center;
  font-family: "Helvetica", sans-serif;
}

// And form-specific styling.

.perseid-form {
  width: 100%;
  margin: auto;

  &__steps {
    display: flex;
    overflow: hidden;
  }

  &__step {
    min-width: 100%;
    padding: 1rem 3rem;
    animation: 500ms ease-in-out forwards swipe-out;

    &__fields {
      display: grid;
      row-gap: 2rem;
    }
  }

  &__step[class*="active"]:first-child {
    animation: 500ms ease-in-out forwards swipe-in-one;
  }
  &__step[class*="active"]:last-child:not(:first-child) {
    animation: 500ms ease-in-out forwards swipe-in-two;
  }
}

.submit {
  border: none;
  cursor: pointer;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: #fefefe;
  font-size: 1.25rem;
  background: #46c0b0;
  justify-self: flex-end;
  transition: all 250ms ease-in-out;

  &:hover {
    background: #4cccbb;
  }
}

.rating {
  position: relative;
  padding: 0.25rem 0;

  &__star {
    cursor: pointer;
    display: inline-block;
    font-size: 2rem;
    min-width: 2rem;
    min-height: 2rem;

    &::after {
      content: "⚪️";
    }

    &--active {
      animation: 250ms ease-in-out forwards bubble-in;
      &::after {
        content: "?";
      }
    }
  }

  &[class*="error"] {
    &::after {
      left: 0;
      bottom: -1.5rem;
      color: #f13232;
      position: absolute;
      font-size: 0.75rem;
      content: "? This field is required";
      animation: 250ms ease-in-out forwards fade-in;
    }
  }
}

.review {
  display: grid;
  row-gap: 1rem;
  position: relative;
  animation: 250ms ease-in-out forwards fade-in;

  label {
    font-size: 1.25rem;
  }

  textarea {
    resize: none;
    min-height: 5rem;
    border-radius: 8px;
    border: 1px solid #46c0b0;
    transition: all 250ms ease-in-out;
  }

  &[class*="error"] {
    &::after {
      left: 0;
      bottom: -1.5rem;
      color: #f13232;
      position: absolute;
      font-size: 0.75rem;
      content: "? This field is required";
      animation: 250ms ease-in-out forwards fade-in;
    }
  }
}

@media screen and (min-width: 30rem) {
  .perseid-form {
    max-width: 30rem;
  }
}

Und voilà ?

---

Abschluss

Herzlichen Glückwunsch! ? Sie haben gerade mit Perseid und React ein dynamisches Benutzer-Feedback-Formular erstellt.

In diesem Tutorial haben wir besprochen, wie man:

• Definieren Sie eine Formularkonfiguration mit bedingter Logik.
• Erstellen Sie benutzerdefinierte React-Komponenten, um Benutzerinteraktionen zu verarbeiten.
• Rendern Sie das Formular in Ihrer App und gestalten Sie es mit Animationen und benutzerdefiniertem CSS.

Fühlen Sie sich frei, mit zusätzlichen Feldern und Schritten zu experimentieren, die zu Ihrem Anwendungsfall passen. Viel Spaß beim Erstellen toller Formen! ?

---

• ? Weitere Beispiele
• ✅ Vollständige Dokumentation
• ? Treten Sie unserem Discord bei
• ? Starten Sie das Projekt auf GitHub
• ❤️Sponsor Perseid

Das obige ist der detaillierte Inhalt vonErstellen eines Benutzer-Feedback-Formulars mit Perseid und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!