javascript / intermediate
Snippet
Logik-Kapselung mit benutzerdefinierten Hooks
Benutzerdefinierte Hooks ermöglichen es Ihnen, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren, wodurch Ihre Next.js-Komponenten sauber und auf die Benutzeroberfläche fokussiert bleiben.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useState } from 'react';function useInput(initialValue) {const [value, setValue] = useState(initialValue);const onChange = (e) => setValue(e.target.value);return { value, onChange, reset: () => setValue('') };}// Usage in Next.js componentexport default function SignupForm() {const nameInput = useInput('');return <input type="text" {...nameInput} />;}
nextjs
Erklärung
1
function useInput(initialValue) {
Deklariert einen benutzerdefinierten Hook, der den Status von Texteingaben verwaltet.
2
{...nameInput}
Verwendet den Spread-Operator, um die Props 'value' und 'onChange' an das Input-Element zu übergeben.