javascript / intermediate
Snippet
Formularstatus mit useFormStatus verfolgen
Der Hook useFormStatus liefert Informationen über die letzte Formularübermittlung. Er ist besonders nützlich, um Schaltflächen zu deaktivieren oder Ladeindikatoren in Kindkomponenten eines Formulars anzuzeigen, das Server Actions verwendet.
snippet.js
1
2
3
4
5
6
import { useFormStatus } from 'react-dom';function SubmitButton() {const { pending } = useFormStatus();return <button disabled={pending}>{pending ? 'Sending...' : 'Submit'}</button>;}
nextjs
Erklärung
1
const { pending } = useFormStatus();
Extrahiert den Booleschen Wert 'pending', der während einer aktiven Server Action wahr wird.
2
disabled={pending}
Verhindert Mehrfacheinsendungen, indem die Schaltfläche deaktiviert wird, während die Aktion verarbeitet wird.