React - Erforderliches Checkbox-Beispiel mit React Hook Form

Blog

React - Erforderliches Checkbox-Beispiel mit React Hook Form

Dies ist ein kurzes Beispiel für die Implementierung eines erforderlichen Kontrollkästchenfelds in React mit der React Hook Form-Bibliothek. Ein detaillierteres Beispiel für ein Registrierungsformular, das eine Reihe anderer Felder enthält, finden Sie unter React - Beispiel zur Formularvalidierung mit React Hook Form .

Hier ist es in Aktion:

(Siehe auf StackBlitz unter https://stackblitz.com/edit/react-hook-form-required-checkbox-example )

Checkbox App-Komponente für React Hook Form erforderlich

Die App-Komponente enthält ein Beispielformular, das mit der React Hook Form-Bibliothek erstellt wurde und ein einzelnes erforderliches Kontrollkästchen enthält.

www aol com mail anmelden

Formularvalidierungsregeln werden mit der Yup-Schemavalidierungsbibliothek definiert und an das React Hook Form |_+_| . übergeben Funktion, für weitere Informationen zu Yup siehe https://github.com/jquense/yup .

Die Checkbox wird mit der Regel |_+_| auf erforderlich gesetzt.

Die |_+_| Die Hook-Funktion gibt ein Objekt mit Methoden zum Arbeiten mit einem Formular zurück, einschließlich der Registrierung von Eingaben, der Handhabung des Absendens von Formularen, des Zurücksetzens des Formulars, der Anzeige von Fehlern und mehr. Eine vollständige Liste finden Sie unter https://react-hook-form.com/api#useForm .

Die |_+_| -Methode wird aufgerufen, wenn das Formular gültig und gesendet ist, und zeigt die Formulardaten einfach in einer Javascript-Warnung an.

Die zurückgegebene JSX-Vorlage enthält das Formular mit dem erforderlichen Kontrollkästchenfeld und der Validierungsnachricht. Das Formularfeld wird beim React Hook Form mit dem |_+_| . registriert Attribut, das die Checkbox mit seinem |_+_| registriert.

#reagieren

jasonwatmore.com

React - Erforderliches Checkbox-Beispiel mit React Hook Form

Dies ist ein kurzes Beispiel für die Implementierung eines erforderlichen Kontrollkästchenfelds in React mit der React Hook Form-Bibliothek. Ein detaillierteres Beispiel für ein Registrierungsformular, das eine Reihe anderer Felder enthält, finden Sie unter React - Formularvalidierungsbeispiel mit React-Hook-Formular.